From e049695bed5a41485d88514431275b77a750b741 Mon Sep 17 00:00:00 2001
From: jordankoschei-okta <jordan.koschei@okta.com>
Date: Tue, 11 Jul 2023 15:56:57 -0400
Subject: [PATCH 1/8] feat: hide native clear button

---
 .../odyssey-react-mui/src/theme/components.tsx    | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 8f10e854b1..d3438dbf3e 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -1469,6 +1469,21 @@ export const components = (
               opacity: "1 !important",
             },
           },
+
+          [`&::-webkit-search-cancel-button`]: {
+            display: "none",
+            "-webkit-appearance": "none",
+            "-moz-appearance": "none",
+          },
+
+          [`&::-moz-search-cancel-button`]: {
+            display: "none",
+            "-moz-appearance": "none",
+          },
+
+          [`&::-ms-clear`]: {
+            display: "none",
+          },
         },
       },
     },

From 456e368a8c63be4b1e47943f5702575c54827026 Mon Sep 17 00:00:00 2001
From: jordankoschei-okta <jordan.koschei@okta.com>
Date: Tue, 11 Jul 2023 22:28:17 -0400
Subject: [PATCH 2/8] feat: add custom button for search clear

---
 .../odyssey-react-mui/src/SearchField.tsx     | 54 +++++++++++++++++--
 1 file changed, 49 insertions(+), 5 deletions(-)

diff --git a/packages/odyssey-react-mui/src/SearchField.tsx b/packages/odyssey-react-mui/src/SearchField.tsx
index 4e849dd24b..4bf85251f0 100644
--- a/packages/odyssey-react-mui/src/SearchField.tsx
+++ b/packages/odyssey-react-mui/src/SearchField.tsx
@@ -10,6 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { useState, useEffect } from "react";
 import { InputAdornment, InputBase } from "@mui/material";
 import {
   ChangeEventHandler,
@@ -20,8 +21,9 @@ import {
   useCallback,
 } from "react";
 
-import { SearchIcon } from "./iconDictionary";
+import { CloseCircleFilledIcon, SearchIcon } from "./iconDictionary";
 import { Field } from "./Field";
+import { Button } from "./Button";
 
 export type SearchFieldProps = {
   /**
@@ -50,6 +52,10 @@ export type SearchFieldProps = {
    * Callback fired when the `input` element loses focus.
    */
   onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  /**
+   * Callback fired when the clear button is pressed.
+   */
+  onClear?: () => void;
   /**
    * Callback fired when the value is changed.
    */
@@ -76,14 +82,36 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       id: idOverride,
       isDisabled = false,
       label,
-      onChange,
+      onChange: onChangeProp,
       onFocus,
       onBlur,
+      onClear: onClearProp,
       placeholder,
-      value,
+      value: controlledValue,
     },
     ref
   ) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState("");
+
+    const onChange = useCallback(
+      (e) => {
+        setUncontrolledValue(e.target.value);
+        if (onChangeProp) onChangeProp(e);
+      },
+      [onChangeProp]
+    );
+
+    const onClear = useCallback(() => {
+      setUncontrolledValue("");
+      if (onClearProp) onClearProp();
+    }, [onClearProp]);
+
+    useEffect(() => {
+      if (controlledValue !== undefined) {
+        setUncontrolledValue(controlledValue);
+      }
+    }, [controlledValue]);
+
     const renderFieldComponent = useCallback(
       ({ ariaDescribedBy, id }) => (
         <InputBase
@@ -91,6 +119,20 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
+          endAdornment={
+            uncontrolledValue.length > 0 && (
+              <InputAdornment position="end">
+                <Button
+                  ariaLabel="Clear"
+                  onClick={onClear}
+                  size="small"
+                  startIcon={<CloseCircleFilledIcon />}
+                  text=""
+                  variant="floating"
+                />
+              </InputAdornment>
+            )
+          }
           id={id}
           name={id}
           onChange={onChange}
@@ -104,7 +146,9 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
             </InputAdornment>
           }
           type="search"
-          value={value}
+          value={
+            controlledValue !== undefined ? controlledValue : uncontrolledValue
+          }
         />
       ),
       [
@@ -115,7 +159,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         onBlur,
         placeholder,
         ref,
-        value,
+        uncontrolledValue,
       ]
     );
 

From 1822d2ffa170af399871dad5a511ad29bc7f87e8 Mon Sep 17 00:00:00 2001
From: jordankoschei-okta <jordan.koschei@okta.com>
Date: Wed, 12 Jul 2023 06:39:55 -0400
Subject: [PATCH 3/8] docs: add proper docs to SearchField

---
 .../odyssey-react-mui/src/SearchField.tsx     |  2 +
 .../odyssey-mui/SearchField/SearchField.mdx   | 13 ----
 .../SearchField/SearchField.stories.tsx       | 78 +++++++++++++++++++
 3 files changed, 80 insertions(+), 13 deletions(-)
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/SearchField/SearchField.mdx

diff --git a/packages/odyssey-react-mui/src/SearchField.tsx b/packages/odyssey-react-mui/src/SearchField.tsx
index 4bf85251f0..f9008901e1 100644
--- a/packages/odyssey-react-mui/src/SearchField.tsx
+++ b/packages/odyssey-react-mui/src/SearchField.tsx
@@ -124,6 +124,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
               <InputAdornment position="end">
                 <Button
                   ariaLabel="Clear"
+                  isDisabled={isDisabled}
                   onClick={onClear}
                   size="small"
                   startIcon={<CloseCircleFilledIcon />}
@@ -154,6 +155,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       [
         autoCompleteType,
         hasInitialFocus,
+        isDisabled,
         onChange,
         onFocus,
         onBlur,
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/SearchField/SearchField.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/SearchField/SearchField.mdx
deleted file mode 100644
index fe755cfcfb..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-mui/SearchField/SearchField.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ArgsTable, Canvas, Meta } from "@storybook/addon-docs";
-import { Story } from "@storybook/blocks";
-import * as Stories from "./SearchField.stories";
-
-<Meta title="MUI Components/Forms/SearchField" anchor />
-
-# Search Field
-
-Search inputs allow the user to submit queries. This is the only input type where `placeholder` may be used.
-
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/SearchField/SearchField.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/SearchField/SearchField.stories.tsx
index 6b693d515e..235f9a055f 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/SearchField/SearchField.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/SearchField/SearchField.stories.tsx
@@ -21,33 +21,110 @@ const storybookMeta: Meta<SearchFieldProps> = {
   argTypes: {
     autoCompleteType: {
       control: "text",
+      description:
+        "This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill)",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     hasInitialFocus: {
       control: "boolean",
+      description: "If `true`, the component will receive focus automatically",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     isDisabled: {
       control: "boolean",
+      description: "If `true`, the component is disabled",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
     },
     id: {
       control: "text",
+      description: "The id of the `input` element",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     label: {
       control: "text",
+      description:
+        "This label won't show up visually, but it's required for accessibility",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     onBlur: {
       control: "function",
+      description: "Callback fired when the `input` element loses focus",
+      table: {
+        type: {
+          summary: "function",
+        },
+        defaultValue: "",
+      },
+    },
+    onClear: {
+      control: "function",
+      description: "Callback fired when the clear button is pressed",
+      table: {
+        type: {
+          summary: "function",
+        },
+        defaultValue: "",
+      },
     },
     onChange: {
       control: "function",
+      description: "Callback fired when the value is changed",
+      table: {
+        type: {
+          summary: "function",
+        },
+        defaultValue: "",
+      },
     },
     onFocus: {
       control: "function",
+      description: "Callback fired when the `input` element gets focus",
+      table: {
+        type: {
+          summary: "function",
+        },
+        defaultValue: "",
+      },
     },
     placeholder: {
       control: "text",
+      description:
+        "The short hint displayed in the `input` before the user enters a value",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
     value: {
       control: "text",
+      description:
+        "The value of the `input` element, required for a controlled component",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
     },
   },
   args: {
@@ -55,6 +132,7 @@ const storybookMeta: Meta<SearchFieldProps> = {
     placeholder: "Search planets",
   },
   decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
 };
 
 export default storybookMeta;

From 19c00063845eb9da1dd628611b7cd80a00c72bad Mon Sep 17 00:00:00 2001
From: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
Date: Fri, 14 Jul 2023 15:02:05 -0400
Subject: [PATCH 4/8] Update packages/odyssey-react-mui/src/SearchField.tsx

---
 packages/odyssey-react-mui/src/SearchField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/odyssey-react-mui/src/SearchField.tsx b/packages/odyssey-react-mui/src/SearchField.tsx
index f9008901e1..ed2582770a 100644
--- a/packages/odyssey-react-mui/src/SearchField.tsx
+++ b/packages/odyssey-react-mui/src/SearchField.tsx
@@ -95,7 +95,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
 
     const onChange = useCallback(
       (e) => {
-        setUncontrolledValue(e.target.value);
+        setUncontrolledValue(e.currentTarget.value);
         if (onChangeProp) onChangeProp(e);
       },
       [onChangeProp]

From 64fae31bea94540758f67df01264572da01aeaff Mon Sep 17 00:00:00 2001
From: jordankoschei-okta <jordan.koschei@okta.com>
Date: Fri, 14 Jul 2023 15:40:24 -0400
Subject: [PATCH 5/8] refactor: add KG improvements

---
 packages/odyssey-react-mui/src/SearchField.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/odyssey-react-mui/src/SearchField.tsx b/packages/odyssey-react-mui/src/SearchField.tsx
index ed2582770a..084235497d 100644
--- a/packages/odyssey-react-mui/src/SearchField.tsx
+++ b/packages/odyssey-react-mui/src/SearchField.tsx
@@ -93,17 +93,18 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   ) => {
     const [uncontrolledValue, setUncontrolledValue] = useState("");
 
-    const onChange = useCallback(
-      (e) => {
-        setUncontrolledValue(e.currentTarget.value);
-        if (onChangeProp) onChangeProp(e);
-      },
-      [onChangeProp]
-    );
+    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =
+      useCallback(
+        (event) => {
+          setUncontrolledValue(event.currentTarget.value);
+          onChangeProp?.(event);
+        },
+        [onChangeProp]
+      );
 
     const onClear = useCallback(() => {
       setUncontrolledValue("");
-      if (onClearProp) onClearProp();
+      onClearProp?.();
     }, [onClearProp]);
 
     useEffect(() => {
@@ -161,6 +162,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         onBlur,
         placeholder,
         ref,
+        controlledValue,
         uncontrolledValue,
       ]
     );

From 9f036abea06c4a5f63c25bea16b96677f96deff5 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
Date: Thu, 20 Jul 2023 20:15:31 -0400
Subject: [PATCH 6/8] Update packages/odyssey-react-mui/src/SearchField.tsx

---
 packages/odyssey-react-mui/src/SearchField.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/odyssey-react-mui/src/SearchField.tsx b/packages/odyssey-react-mui/src/SearchField.tsx
index 084235497d..a0d33f995a 100644
--- a/packages/odyssey-react-mui/src/SearchField.tsx
+++ b/packages/odyssey-react-mui/src/SearchField.tsx
@@ -157,6 +157,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         autoCompleteType,
         hasInitialFocus,
         isDisabled,
+        onClear,
         onChange,
         onFocus,
         onBlur,

From d0c21ae14b08874a0fc74ed758458c43b1240504 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
Date: Thu, 20 Jul 2023 20:15:45 -0400
Subject: [PATCH 7/8] Update packages/odyssey-react-mui/src/SearchField.tsx

---
 packages/odyssey-react-mui/src/SearchField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/odyssey-react-mui/src/SearchField.tsx b/packages/odyssey-react-mui/src/SearchField.tsx
index a0d33f995a..319b240ccb 100644
--- a/packages/odyssey-react-mui/src/SearchField.tsx
+++ b/packages/odyssey-react-mui/src/SearchField.tsx
@@ -121,7 +121,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
           endAdornment={
-            uncontrolledValue.length > 0 && (
+            uncontrolledValue && (
               <InputAdornment position="end">
                 <Button
                   ariaLabel="Clear"

From 77717cf30a48745a87b2bd42bd886d2d48634bb1 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
Date: Thu, 20 Jul 2023 20:15:57 -0400
Subject: [PATCH 8/8] Update packages/odyssey-react-mui/src/SearchField.tsx

---
 packages/odyssey-react-mui/src/SearchField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/odyssey-react-mui/src/SearchField.tsx b/packages/odyssey-react-mui/src/SearchField.tsx
index 319b240ccb..9043cb8665 100644
--- a/packages/odyssey-react-mui/src/SearchField.tsx
+++ b/packages/odyssey-react-mui/src/SearchField.tsx
@@ -149,7 +149,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           }
           type="search"
           value={
-            controlledValue !== undefined ? controlledValue : uncontrolledValue
+            controlledValue === undefined ? uncontrolledValue : controlledValue
           }
         />
       ),