fix(fuselage): onChange prop on PaginatedSelectFiltered (#659)

RocketChat · Mar 7, 2022 · 9e170ff · 9e170ff
1 parent 945da0a
commit 9e170ff
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/...lectPaginated/SelectPaginated.stories.tsx → ...lectPaginated/PaginatedSelect.stories.tsx b/...lectPaginated/SelectPaginated.stories.tsx → ...lectPaginated/PaginatedSelect.stories.tsx
@@ -26,7 +26,7 @@ const optionsEllipses = [
 ];
 
 export default {
-  title: 'Inputs/SelectPaginated',
+  title: 'Inputs/PaginatedSelect',
   component: PaginatedSelect,
   parameters: {
     docs: {

diff --git a/packages/fuselage/src/components/SelectPaginated/PaginatedSelectFiltered.tsx b/packages/fuselage/src/components/SelectPaginated/PaginatedSelectFiltered.tsx
@@ -8,6 +8,11 @@ import { InputBox } from '../InputBox';
 
 type PaginatedSelectFilteredProps = PaginatedSelectProps;
 
+type PaginatedSelectFilteredAnchorProps = Omit<
+  PaginatedSelectProps,
+  'onChange'
+>;
+
 export const PaginatedSelectFiltered = ({
   // filter,
   // setFilter,
@@ -16,15 +21,19 @@ export const PaginatedSelectFiltered = ({
   ...props
 }: PaginatedSelectFilteredProps) => {
   const [filter, setFilter] = useState('');
+
+  const handleChange = useMutableCallback((e: FormEvent<HTMLInputElement>) => {
+    setFilter(e.currentTarget.value);
+  });
+
   const anchor = useCallback(
     forwardRef(
       (
         {
           children: _children,
           filter,
-          onChange: _onChange,
           ...props
-        }: PaginatedSelectFilteredProps,
+        }: PaginatedSelectFilteredAnchorProps,
         ref: Ref<HTMLInputElement>
       ) => (
         <InputBox.Input
@@ -34,9 +43,7 @@ export const PaginatedSelectFiltered = ({
           ref={ref}
           placeholder={placeholder}
           value={filter}
-          onChange={useMutableCallback((e: FormEvent<HTMLInputElement>) => {
-            setFilter(e.currentTarget.value);
-          })}
+          onChange={handleChange}
           {...props}
           rcx-input-box--undecorated
         />