fix(blade): Trigger native select events in dropdown/ file upload / Date picker [FC-3151]

packages/blade/src/components/DatePicker/DatePicker.web.tsx

@@ -34,6 +34,7 @@ import type { StyledPropsBlade } from '~components/Box/styledProps';
 import { getStyledProps } from '~components/Box/styledProps';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import { componentZIndices } from '~utils/componentZIndices';
+import { fireNativeEvent } from '~utils/fireNativeEvent';
 
 const DatePicker = <Type extends DateSelectionType = 'single'>({
   selectionType,
@@ -71,6 +72,7 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
   const isSingle = _selectionType === 'single';
   const [_, forceRerender] = React.useReducer((x: number) => x + 1, 0);
   const [selectedPreset, setSelectedPreset] = React.useState<DatesRangeValue | null>(null);
+  const referenceRef = React.useRef<HTMLButtonElement>(null);
 
   const [_picker, setPicker] = useControllableState<PickerType>({
     defaultValue: defaultPicker,
@@ -97,6 +99,7 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
     defaultValue,
     onChange: (date) => {
       onChange?.(date as never);
+      fireNativeEvent(referenceRef, ['input']);
       if (isSingle) return;
       // sync selected preset with value
       setSelectedPreset(date as DatesRangeValue);
@@ -124,6 +127,7 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
   const handleApply = (): void => {
     if (isSingle) {
       onChange?.(controlledValue);
+      fireNativeEvent(referenceRef, ['change']);
       setOldValue(controlledValue);
       onApply?.(controlledValue);
       close();
@@ -132,6 +136,7 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
     // only apply if both dates are selected
     if (hasBothDatesSelected) {
       onChange?.(controlledValue);
+      fireNativeEvent(referenceRef, ['change']);
       setOldValue(controlledValue);
       onApply?.(controlledValue);
       close();
@@ -140,14 +145,14 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
 
   const handleCancel = (): void => {
     setControlledValue(oldValue);
+    fireNativeEvent(referenceRef, ['change']);
     setPickedDate(null);
     close();
   };
 
   const isMobile = useIsMobile();
   const defaultInitialFocusRef = React.useRef<HTMLButtonElement>(null);
   const titleId = useId('datepicker-title');
-  const referenceRef = React.useRef<HTMLButtonElement>(null);
   const {
     context,
     refs,

packages/blade/src/components/Dropdown/useDropdown.ts

@@ -16,6 +16,7 @@ import { dropdownComponentIds } from './dropdownComponentIds';
 import type { FormInputHandleOnKeyDownEvent } from '~components/Form/FormTypes';
 import { isReactNative } from '~utils';
 import type { ContainerElementType } from '~utils/types';
+import { fireNativeEvent } from '~utils/fireNativeEvent';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = (): void => {};
@@ -355,6 +356,7 @@ const useDropdown = (): UseDropdownReturnValue => {
 
     const optionValues = options.map((option) => option.value);
     ensureScrollVisiblity(updatedIndex, rest.actionListItemRef.current, optionValues);
+    fireNativeEvent(rest.actionListItemRef as React.RefObject<HTMLElement>, ['change', 'input']);
   };
 
   /**

packages/blade/src/components/FileUpload/FileUpload.web.tsx

@@ -26,6 +26,7 @@ import { makeAccessible } from '~utils/makeAccessible';
 import { formHintLeftLabelMarginLeft } from '~components/Input/BaseInput/baseInputTokens';
 import { useMergeRefs } from '~utils/useMergeRefs';
 import { useControllableState } from '~utils/useControllable';
+import { fireNativeEvent } from '~utils/fireNativeEvent';
 
 const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadProps> = (
   {
@@ -158,6 +159,7 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
     if (!hasValidationErrors) {
       handleFilesChange(droppedFiles);
       onDrop?.({ name, fileList: allFiles });
+      fireNativeEvent(inputRef, ['change', 'input']);
     }
   };
 
@@ -307,6 +309,7 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
               const newFiles = selectedFiles.filter(({ id }) => id !== selectedFiles[0].id);
               setSelectedFiles(() => newFiles);
               onRemove?.({ file: selectedFiles[0] });
+              fireNativeEvent(inputRef, ['change', 'input']);
             }}
             onReupload={() => {
               const newFiles = selectedFiles.filter(({ id }) => id !== selectedFiles[0].id);
@@ -368,6 +371,7 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
                 const newFiles = selectedFiles.filter(({ id }) => id !== file.id);
                 setSelectedFiles(() => newFiles);
                 onRemove?.({ file });
+                fireNativeEvent(inputRef, ['change', 'input']);
               }}
               onReupload={() => {
                 const newFiles = selectedFiles.filter(({ id }) => id !== file.id);
@@ -386,6 +390,7 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
                 const newFiles = selectedFiles.filter(({ id }) => id !== file.id);
                 setSelectedFiles(() => newFiles);
                 onDismiss?.({ file });
+                fireNativeEvent(inputRef, ['change', 'input']);
               }}
               onPreview={onPreview}
             />

packages/blade/src/components/Input/DropdownInputTriggers/AutoComplete.tsx

@@ -134,7 +134,6 @@ const useAutoComplete = ({
     }
     props.onChange?.({ name: props.name, values });
   };
-
   return {
     onSelectionChange,
     onTriggerKeydown,

packages/blade/src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { BaseInput } from '../BaseInput';
 import type { BaseInputProps } from '../BaseInput';
 import { InputChevronIcon } from './InputChevronIcon';
-import type { BaseDropdownInputTriggerProps } from './types';
+import type { BaseDropdownInputTriggerProps, useControlledDropdownInputProps } from './types';
 import isEmpty from '~utils/lodashButBetter/isEmpty';
 import { useDropdown } from '~components/Dropdown/useDropdown';
 import { isReactNative } from '~utils';
@@ -18,19 +18,9 @@ import {
   validationStateToInputTrailingIconMap,
 } from '~components/Table/tokens';
 import { useTableEditableCell } from '~components/Table/TableEditableCellContext';
+import { fireNativeEvent } from '~utils/fireNativeEvent';
 
-const useControlledDropdownInput = (
-  props: Pick<
-    BaseDropdownInputTriggerProps,
-    | 'onChange'
-    | 'name'
-    | 'value'
-    | 'defaultValue'
-    | 'onInputValueChange'
-    | 'syncInputValueWithSelection'
-    | 'isSelectInput'
-  >,
-): void => {
+const useControlledDropdownInput = (props: useControlledDropdownInputProps): void => {
   const isFirstRender = useFirstRender();
   const {
     changeCallbackTriggerer,
@@ -116,6 +106,7 @@ const useControlledDropdownInput = (
         name: props.name,
         values: getValuesArrayFromIndices(),
       });
+      fireNativeEvent(props.triggererRef, ['change', 'input']);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [changeCallbackTriggerer]);
@@ -176,6 +167,7 @@ const _BaseDropdownInputTrigger = (
     defaultValue: props.defaultValue,
     syncInputValueWithSelection: props.syncInputValueWithSelection,
     isSelectInput: props.isSelectInput,
+    triggererRef,
   });
 
   const getValue = (): string | undefined => {

packages/blade/src/components/Input/DropdownInputTriggers/types.ts

@@ -127,6 +127,19 @@ export type BaseDropdownInputTriggerProps = Omit<
   onTriggerClick: BaseInputProps['onClick'];
 };
 
+export type useControlledDropdownInputProps = Pick<
+  BaseDropdownInputTriggerProps,
+  | 'onChange'
+  | 'name'
+  | 'value'
+  | 'defaultValue'
+  | 'onInputValueChange'
+  | 'syncInputValueWithSelection'
+  | 'isSelectInput'
+> & {
+  triggererRef: React.RefObject<HTMLElement>;
+};
+
 export type SelectInputProps = DropdownInputTriggersProps;
 
 export type AutoCompleteProps = DropdownInputTriggersCommonProps & {

packages/blade/src/utils/fireNativeEvent/fireNativeEvent.web.ts

@@ -0,0 +1,30 @@
+/**
+ * Fires native events on a given HTML element reference.
+ *
+ * @param ref - A React ref object pointing to an HTML element or null.
+ * @param eventTypes - An array of event types to be dispatched. Supported event types are 'change' and 'input'.
+ *
+ * @remarks
+ * This function creates and dispatches native events of the specified types on the element referenced by `ref`.
+ * If `ref` is null, a warning is logged to the console.
+ *
+ * @example
+ * ```typescript
+ * const inputRef = React.createRef<HTMLInputElement>();
+ * fireNativeEvent(inputRef, ['change', 'input']);
+ * ```
+ */
+
+export const fireNativeEvent = (
+  ref: React.RefObject<HTMLElement> | null,
+  eventTypes: Array<'change' | 'input'>,
+): void => {
+  if (ref) {
+    eventTypes.forEach((eventType) => {
+      const event = new Event(eventType, { bubbles: true });
+      ref.current?.dispatchEvent(event);
+    });
+  } else {
+    console.warn('ref is not defined');
+  }
+};

packages/blade/src/utils/fireNativeEvent/index.ts

@@ -0,0 +1 @@
+export * from './fireNativeEvent.web';