more

Author: katieperry4

packages/maas/frontend/src/app/pages/api-keys/allKeys/ApiKeysToolbar.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Button,
   MenuToggle,
-  // eslint-disable-next-line no-restricted-imports
   Select,
   SelectList,
   SelectOption,
@@ -45,10 +44,12 @@ const ApiKeysToolbar: React.FC<ApiKeysToolbarProps> = ({
   onStatusClear,
 }) => {
   const [isStatusSelectOpen, setIsStatusSelectOpen] = React.useState(false);
+  const [localUsername, setLocalUsername] = React.useState('');
 
   return (
     <Toolbar
       clearAllFilters={() => {
+        setLocalUsername('');
         onUsernameChange('');
         STATUS_OPTIONS.forEach(onStatusClear);
       }}
@@ -117,9 +118,13 @@ const ApiKeysToolbar: React.FC<ApiKeysToolbarProps> = ({
               <SearchInput
                 aria-label="Filter by username"
                 placeholder="Filter by username"
-                value={filterData.username}
-                onChange={(_event, value) => onUsernameChange(value)}
-                onClear={() => onUsernameChange('')}
+                value={localUsername}
+                onSearch={(_event, value) => onUsernameChange(value)}
+                onChange={(_event, value) => setLocalUsername(value)}
+                onClear={() => {
+                  setLocalUsername('');
+                  onUsernameChange('');
+                }}
               />
             </ToolbarFilter>
           </ToolbarGroup>