Set value to be controlled by the consumer

seek-oss · Apr 15, 2024 · c24a2bf · c24a2bf
1 parent 12422d8
commit c24a2bf
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/braid-design-system/src/lib/components/TagSelector/TagSelector.docs.tsx b/packages/braid-design-system/src/lib/components/TagSelector/TagSelector.docs.tsx
@@ -16,6 +16,7 @@ const docs: ComponentDocs = {
       { description: 'the other', id: 'theOtherStandardOptions' },
       { description: 'another one', id: 'anotherOneStandardOptions' },
     ];
+    const [standardValue, setStandardValue] = React.useState<string>('');
 
     const [preSelectedTags, setPreSelectedTags] = React.useState<Tag[]>([
       { description: 'first', id: 'firstPreSelected' },
@@ -28,6 +29,7 @@ const docs: ComponentDocs = {
       { description: 'the other', id: 'theOtherPreOptions' },
       { description: 'another one', id: 'anotherOnePreOptions' },
     ];
+    const [preValue, setPreValue] = React.useState<string>('');
 
     return source(
       <Stack space="xxlarge">
@@ -44,6 +46,8 @@ const docs: ComponentDocs = {
                   : [...tags, tag],
               );
             }}
+            value={standardValue}
+            onChange={(event) => setStandardValue(event.target.value)}
           />
         </Stack>
         <Stack space="small">
@@ -59,6 +63,8 @@ const docs: ComponentDocs = {
                   : [...tags, tag],
               );
             }}
+            value={preValue}
+            onChange={(event) => setPreValue(event.target.value)}
           />
         </Stack>
       </Stack>,

diff --git a/packages/braid-design-system/src/lib/components/TagSelector/TagSelector.tsx b/packages/braid-design-system/src/lib/components/TagSelector/TagSelector.tsx
@@ -87,14 +87,18 @@ export interface TagSelectorProps {
   options: Tag[];
   selectedTags?: Tag[];
   ariaLabel?: string;
-  onSelect?: (tag: Tag) => void;
+  onSelect: (tag: Tag) => void;
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const TagSelector = ({
   options,
   selectedTags,
   ariaLabel,
   onSelect,
+  value,
+  onChange,
 }: TagSelectorProps) => {
   const uniqueSelectedTags = [
     ...(selectedTags || []).filter(
@@ -103,7 +107,6 @@ export const TagSelector = ({
   ];
   const dropdownOptions = [...uniqueSelectedTags, ...options];
 
-  const [input, setInput] = useState('');
   const [isFocussed, setIsFocussed] = useState(false);
   const [activeOption, setActiveOption] = useState<string | undefined>(
     dropdownOptions[0].id,
@@ -159,9 +162,8 @@ export const TagSelector = ({
       <div className="combo-wrap">
         <input
           type="text"
-          value={input}
-          // Todo - make this element controlled by the consumer
-          onChange={(event) => setInput(event.target.value)}
+          value={value}
+          onChange={onChange}
           id="tag-selector"
           role="combobox"
           aria-controls="available-tags"