Add custom onChange response

sippy-platform · Jul 1, 2022 · 741e8dc · 741e8dc
1 parent 57b50a1
commit 741e8dc
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/components/InputControl/InputControl.tsx b/src/components/InputControl/InputControl.tsx
@@ -7,7 +7,7 @@ export interface InputControlProps
   /**
    * ID of the input
    */
-  id?: string;
+  id: string;
   /**
    * Name of the input
    */
@@ -28,6 +28,10 @@ export interface InputControlProps
    * Placeholder of the input
    */
   placeholder?: string;
+  /**
+   * The callback for changing values
+   */
+  onChange: (value: any | null) => void;
   /**
    * Type of the input
    */
@@ -50,6 +54,7 @@ export const InputControl = ({
   type,
   placeholder,
   helper,
+  onChange,
   ...props
 }: InputControlProps) => {
   const uniqueName = name ?? id;
@@ -64,6 +69,7 @@ export const InputControl = ({
           value={value}
           className={clsx("input", className)}
           placeholder={placeholder}
+          onChange={(event) => onChange({ value: event?.target.value, id })}
           aria-describedby={helper ? `${uniqueName}-help` : undefined}
           {...props}
         />

diff --git a/src/components/SelectControl/SelectControl.tsx b/src/components/SelectControl/SelectControl.tsx
@@ -12,7 +12,7 @@ export interface SelectControlProps {
   /**
    * ID of the input
    */
-  id?: string;
+  id: string;
   /**
    * The name attached of the select
    */
@@ -97,7 +97,7 @@ export const SelectControl = ({
       <div className="form-floating">
         <Listbox
           value={value}
-          onChange={onChange}
+          onChange={(value) => onChange({ value, id })}
           disabled={disabled}
           name={uniqueName}
         >