fix(ComboBox): remove inputValue setting

Author: tenphi

.changeset/proud-colts-cheer.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Fixes various issues with ComboBox input typing and selection.

.changeset/sweet-books-hope.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Remove inputValue abstraction from form fields.

src/components/fields/ComboBox/ComboBox.stories.tsx

@@ -128,8 +128,8 @@ With1LongOptionFiltered.play = async ({ canvasElement }) => {
   await userEvent.type(combobox, 'Red');
 };
 
-export const WithForm = TemplateForm.bind({});
-WithForm.play = async ({ canvasElement }) => {
+export const WithinForm = TemplateForm.bind({});
+WithinForm.play = async ({ canvasElement }) => {
   const { getByRole } = within(canvasElement);
 
   const combobox = getByRole('combobox');

src/components/fields/ComboBox/ComboBox.tsx

@@ -5,7 +5,6 @@ import {
   ReactElement,
   RefObject,
   useMemo,
-  useState,
 } from 'react';
 import {
   useButton,
@@ -140,21 +139,22 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
   props: CubeComboBoxProps<T>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const [, rerender] = useState({});
-
   props = useProviderProps(props);
   props = useFormProps(props);
   props = useFieldProps(props, {
-    valuePropsMapper: ({ value, onChange }) => ({
-      inputValue: value != null ? value : '',
-      onInputChange: (val) => {
-        // It triggers on the blur event and passes an empty string if no changes we made
-        // So we do a fallback to the real input value
-        onChange(val || props.inputValue || '', !props.allowsCustomValue);
-        rerender({});
-      },
-      onSelectionChange: onChange,
-    }),
+    valuePropsMapper: ({ value, onChange }) => {
+      return {
+        selectedKey: value ?? null,
+        onSelectionChange(val: string) {
+          if (val != null) {
+            onChange(val);
+          }
+        },
+        onBlur(evt) {
+          evt?.stopPropagation();
+        },
+      };
+    },
   });
 
   let {
@@ -197,6 +197,8 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     filter,
     styles,
     labelSuffix,
+    selectedKey,
+    defaultSelectedKey,
     ...otherProps
   } = props;
 
@@ -270,7 +272,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     if (state.isOpen) {
       updatePosition();
     }
-  }, [updatePosition, state.isOpen, state.collection.size]);
+  }, [state.isOpen, state.collection.size]);
 
   let isInvalid = validationState === 'invalid';
 

src/components/fields/TextInput/TextInputBase.tsx

@@ -247,6 +247,7 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
     minLength,
     ...otherProps
   } = props;
+
   let styles = extractStyles(otherProps, STYLE_LIST);
   let type = otherProps.type;
 

src/components/form/Form/Field.tsx

@@ -65,8 +65,7 @@ function getValueProps(
     };
   } else if (type === 'ComboBox') {
     return {
-      inputValue: value != null ? value : '',
-      onInputChange: (val) => onChange(val, !allowsCustomValue),
+      value: value,
       onSelectionChange: onChange,
     };
   } else if (type === 'Select') {
@@ -101,7 +100,6 @@ interface CubeReplaceFieldProps<T extends FieldTypes>
   onChange?: (any) => void;
   onSelectionChange?: (any) => void;
   onBlur: () => void;
-  onInputChange?: (any) => void;
   labelPosition?: LabelPosition;
 }
 
@@ -255,7 +253,7 @@ export function Field<T extends FieldTypes>(props: CubeFieldProps<T>) {
     newProps,
     getValueProps(
       inputType,
-      __props.field?.inputValue,
+      __props.field?.value,
       __props.onChange,
       child.props.allowsCustomValue,
     ),

src/components/form/Form/types.ts

@@ -8,7 +8,6 @@ export type CubeFieldData<Name extends string, Value> = {
   readonly name: Name;
   errors: ReactNode[];
   value?: Value;
-  inputValue?: Value | string | undefined | null;
   touched?: boolean;
   rules?: any[];
   validating?: boolean;

src/components/form/Form/use-field/types.ts

@@ -49,7 +49,7 @@ export type FieldReturnValue<T extends FieldTypes> = {
     dontTouch: boolean,
     validateTrigger: ValidateTrigger,
   ) => void;
-  message?: React.ReactNode;
+  message?: ReactNode;
   isRequired?: boolean;
   onBlur: () => void;
   nonInput: boolean;

src/components/form/Form/use-field/use-field-props.tsx

@@ -33,10 +33,12 @@ export function useFieldProps<
   const isDisabledRef = useRef(params.unsafe__isDisabled ?? false);
 
   const {
-    valuePropsMapper = ({ value, onChange }) => ({
-      value: value ?? null,
-      onChange,
-    }),
+    valuePropsMapper = ({ value, onChange }) => {
+      return {
+        value: value ?? null,
+        onChange,
+      };
+    },
     defaultValidationTrigger = 'onBlur',
   } = params;
 
@@ -81,16 +83,19 @@ export function useFieldProps<
   );
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const onChangeEvent = useEvent((value, dontTouch: boolean) =>
+  const onChangeEvent = useEvent((value, dontTouch: boolean) => {
     field?.onChange?.(
       value,
       dontTouch,
       field?.validateTrigger ?? defaultValidationTrigger,
-    ),
-  );
+    );
+  });
 
   const valueProps = !isOutsideOfForm
-    ? valuePropsMapper({ value: field.value, onChange: onChangeEvent })
+    ? valuePropsMapper({
+        value: field.value,
+        onChange: onChangeEvent,
+      })
     : {};
 
   if (isInsideLegacyField && !isOutsideOfForm) {

src/components/form/Form/use-field/use-field.ts

@@ -107,7 +107,7 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
     if (field) {
       form.forceReRender();
     } else {
-      form.createField(fieldName);
+      field = form.createField(fieldName);
     }
   }, [field]);
 
@@ -152,7 +152,7 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
       }
     }
 
-    form.setFieldValue(fieldName, val, !dontTouch, false, dontTouch);
+    form.setFieldValue(fieldName, val, !dontTouch);
 
     if (
       !dontTouch &&
@@ -172,13 +172,13 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
     }
   });
 
-  let inputValue = field?.inputValue;
+  let value = field?.value;
 
   return useMemo(
     () => ({
       id: fieldId,
       name: fieldName,
-      value: inputValue,
+      value,
       validateTrigger,
       form,
       field,
@@ -202,9 +202,9 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
     [
       form,
       field,
+      field?.value,
       field?.errors?.length,
       field?.status,
-      field?.inputValue,
       fieldId,
       fieldName,
       isRequired,