TextInput should emit complete SyntheticEvent with clear input action

[adrian-potepa]

tetrisly-react/src/components/TextInput/useTextInput.ts

Lines 56 to 62 in b407d25

	const handleOnClear: MouseEventHandler<HTMLButtonElement> =
	useCallback(() => {
	setInnerValue('');
	onChange?.({
	target: { value: '' },
	} as ChangeEvent<HTMLInputElement>);
	}, [onChange]);

Possible resolve:

const handleOnClear: MouseEventHandler<HTMLButtonElement> = () => {
    setInnerValue('');

    const input = containerRef.current?.querySelector('input');

    if (!input) return;

    const setter = Object.getOwnPropertyDescriptor(
      input.constructor.prototype,
      'value',
    )?.set;

    if (!setter) return;

    setter.call(input, '');

    const e = new Event('input', { bubbles: true });
    input.dispatchEvent(e);
  };