add onChangeValue handler on Select component

Author: stomita

src/scripts/Select.tsx

@@ -1,13 +1,15 @@
 import React, {
   SelectHTMLAttributes,
   OptionHTMLAttributes,
-  useContext,
   Ref,
+  useContext,
+  useRef,
+  ChangeEvent,
 } from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { FieldSetColumnContext } from './FieldSet';
-import { useFormElementId } from './hooks';
+import { useEventCallback, useFormElementId } from './hooks';
 import { createFC } from './common';
 
 /**
@@ -20,32 +22,53 @@ export type SelectProps = {
   error?: FormElementProps['error'];
   elementRef?: Ref<HTMLDivElement>;
   selectRef?: Ref<HTMLSelectElement>;
+  onValueChange?: (value: string, prevValue?: string) => void;
 } & SelectHTMLAttributes<HTMLSelectElement>;
 
 /**
  *
  */
 export const Select = createFC<SelectProps, { isFormElement: boolean }>(
   (props) => {
-    const { id: id_ } = props;
+    const {
+      id: id_,
+      className,
+      label,
+      required,
+      error,
+      cols,
+      elementRef,
+      selectRef,
+      children,
+      onChange: onChange_,
+      onValueChange,
+      ...rprops
+    } = props;
     const id = useFormElementId(id_, 'select');
     const { isFieldSetColumn } = useContext(FieldSetColumnContext);
-    const { label, required, error, cols, elementRef, ...rprops } = props;
-    if (isFieldSetColumn || label || required || error || cols) {
-      const formElemProps = { id, label, required, error, cols, elementRef };
-      return (
-        <FormElement {...formElemProps}>
-          <Select {...{ ...rprops, id }} />
-        </FormElement>
-      );
-    }
-    const { className, selectRef, children, ...rprops2 } = rprops;
+    const prevValueRef = useRef<string>();
+    const onChange = useEventCallback((e: ChangeEvent<HTMLSelectElement>) => {
+      onChange_?.(e);
+      onValueChange?.(e.target.value, prevValueRef.current);
+      prevValueRef.current = e.target.value;
+    });
     const selectClassNames = classnames(className, 'slds-select');
-    return (
-      <select ref={selectRef} id={id} className={selectClassNames} {...rprops2}>
+    const selectElem = (
+      <select
+        ref={selectRef}
+        id={id}
+        className={selectClassNames}
+        onChange={onChange}
+        {...rprops}
+      >
         {children}
       </select>
     );
+    if (isFieldSetColumn || label || required || error || cols) {
+      const formElemProps = { id, label, required, error, cols, elementRef };
+      return <FormElement {...formElemProps}>{selectElem}</FormElement>;
+    }
+    return selectElem;
   },
   { isFormElement: true }
 );

stories/Select.stories.tsx

@@ -11,6 +11,7 @@ const meta: ComponentMeta<typeof Select> = {
   subcomponents: { Option },
   argTypes: {
     onChange: { action: 'change' },
+    onValueChange: { action: 'valueChange' },
     onBlur: { action: 'blur' },
   },
 };