diff --git a/packages/react-templates/src/components/Select/SelectTypeahead.tsx b/packages/react-templates/src/components/Select/SelectTypeahead.tsx
index f6a77de4355..c67134718e1 100644
--- a/packages/react-templates/src/components/Select/SelectTypeahead.tsx
+++ b/packages/react-templates/src/components/Select/SelectTypeahead.tsx
@@ -234,6 +234,15 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
     textInputRef?.current?.focus();
   };
 
+  const onClearButtonClick = () => {
+    setSelected('');
+    setInputValue('');
+    onInputChange && onInputChange('');
+    setFilterValue('');
+    resetActiveAndFocusedItem();
+    textInputRef?.current?.focus();
+  };
+
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
@@ -261,18 +270,7 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
         />
 
         <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
-          <Button
-            variant="plain"
-            onClick={() => {
-              setSelected('');
-              setInputValue('');
-              onInputChange && onInputChange('');
-              setFilterValue('');
-              resetActiveAndFocusedItem();
-              textInputRef?.current?.focus();
-            }}
-            aria-label="Clear input value"
-          >
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
             <TimesIcon aria-hidden />
           </Button>
         </TextInputGroupUtilities>