#InputNumber increment from undefined to 1

5 messages · Page 1 of 1 (latest)

broken matrix
#

Hi, same question as above. When my InputNumber is undefined and there is only placeholder message, i would like to increase value from undefined to 1. Is it Possible? This is my code below

  const handlersRef = useRef<NumberInputHandlers>(null)

  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { ref, value, ...field }, fieldState }) => {
        const { error } = fieldState
        return (
          <div className={'flex items-center'}>
            <button
              type={'button'}
              className={
                'h-fit rounded-md bg-textLightGray px-2 py-2 text-sm leading-none text-text1'
              }
              onClick={() => {
                handlersRef.current?.decrement()
              }}
            >
              <BiMinus />
            </button>
            <NumberInput
              {...field}
              {...props}
              handlersRef={handlersRef}
              styles={{
                input: { backgroundColor: 'transparent' },
              }}
              ref={ref}
              step={1}
              min={0}
              allowDecimal={false}
              hideControls
              error={error?.message === '' ? true : error?.message}
              value={value ?? ''}
              classNames={classes}
            />
            <button
              type={'button'}
              className={
                'h-fit rounded-md bg-textLightGray px-2 py-2 text-sm leading-none text-text1'
              }
              onClick={() => {
                if (value === undefined) {
                  handlersRef.current?.increment()
                  handlersRef.current?.increment()
                } else {
                  handlersRef.current?.increment()
                }
              }}
            >
              <BiPlus />
            </button>
          </div>
        )
      }}
    />
  )
}```
gleaming pilot
#

Also undefined is not a valid value, the component will think that it is uncontrolled. Use number or empty string instead

broken matrix
#

@gleaming pilot I have empty input. When i click increment button, value change to '0'. I would like then the value would change to '1'. Value '0' should be only possible when i decrement