Make TextInput clearable

[kaptinlin]

Add clearable prop to TextInput Component.

[rtivital]

It is not possible with current implementation: TextInput onChange is called with event: React.ChangeEvent<HTMLInputElement>. If clearable prop is added, then it will be required to manage input state internally and thus changing onChange handler to work with string value (there is not any good way to trigger onChange with event object when clear button is clicked). You can easily add this option to your TextInput with rightSection prop and CloseButton component.

[kaptinlin]

I write a ClearableInput component. It dispatch change event using the code from facebook/react#10135 (comment)

import {
  TextInput,
  TextInputProps,
  CloseButton,
  MantineSize,
  useMantineTheme,
} from '@mantine/core';
import { MutableRefObject, ChangeEvent, useState, useEffect, useRef } from 'react';

const RIGHT_SECTION_WIDTH = {
  xs: 24,
  sm: 30,
  md: 34,
  lg: 40,
  xl: 44,
};

export type ClearableInputProps = TextInputProps & {
  size?: MantineSize;
  onClear?: () => void;
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
};

function setNativeValue(element: HTMLInputElement, value: string) {
  const valueSetter = Object.getOwnPropertyDescriptor(element, 'value')?.set;
  const prototype = Object.getPrototypeOf(element);
  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value')?.set;

  if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter?.call(element, value);
  } else {
    valueSetter?.call(element, value);
  }
}

const ClearableInput = (props: ClearableInputProps) => {
  const theme = useMantineTheme();
  const { size = 'sm', onClear, onChange, ...textInputProps } = props;
  const [clearButtonVisible, setClearButtonVisible] = useState(false);

  const ref = useRef<HTMLInputElement>(null);

  const clearClickHandler = () => {
    if (onClear) onClear();
    if (ref.current) {
      setNativeValue(ref.current, '');
      ref.current.dispatchEvent(new Event('input', { bubbles: true }));
    }

    setClearButtonVisible(false);
  };

  useEffect(() => {
    if ((ref as MutableRefObject<HTMLInputElement>).current.value === '') {
      setClearButtonVisible(false);
    } else {
      setClearButtonVisible(true);
    }
  }, []);

  const changeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.value) {
      setClearButtonVisible(true);
    } else {
      setClearButtonVisible(false);
    }
    if (onChange) onChange(e);
  };

  return (
    <TextInput
      ref={ref}
      size={size}
      rightSectionWidth={theme.fn.size({ size, sizes: RIGHT_SECTION_WIDTH })}
      rightSection={
        clearButtonVisible && (
          <CloseButton size={size} variant="transparent" onClick={clearClickHandler} />
        )
      }
      onChange={changeHandler}
      {...textInputProps}
    />
  );
};

export default ClearableInput;

[btroop]

thanks for building this! i removed the rightSectionWidth={theme.fn.size({ size, sizes: RIGHT_SECTION_WIDTH })} because the theme.fn function doesn't seem to be part of the mantine theme object anymore, and the size scales appropriately without it