Byteclaw / visage

Visage design system
https://visage.design
MIT License
12 stars 3 forks source link

[TextArea] - when controlled by react-hook-form controller doesn't react correctly to onChange with autoResize is enabled #662

Closed michalkvasnicak closed 3 years ago

michalkvasnicak commented 3 years ago

Following code causes TextArea to be slow or to ignore the input.

<Controller
        defaultValue=""
        name="description"
        onFocus={() => inputRef.current?.focus()}
        render={({ onBlur, onChange, value }) => (
          <>
            <TextArea
              invalid={!!form.errors?.title}
              autoResize
              id="offer-description"
              name="description"
              onBlur={onBlur}
              onChange={(e) => onChange(e.currentTarget.value)}
              maxLength={800}
              ref={inputRef}
              rows={10}
              required
              value={value}
            />
            <Box>
              <SmallText>{800 - value.length}</SmallText>
            </Box>
          </>
        )}
      />
michalkvasnicak commented 3 years ago

When autoResize is removed, then it works correctly.