Fix controlled example

Workday · Oct 14, 2024 · 932fa7a · 932fa7a
1 parent 1ae1f54
commit 932fa7a
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/modules/preview-react/multi-select/stories/examples/Controlled.tsx b/modules/preview-react/multi-select/stories/examples/Controlled.tsx
@@ -15,6 +15,7 @@ const items = [
 ];
 
 export const Controlled = () => {
+  const formRef = React.useRef<HTMLFormElement>(null);
   const [value, setValue] = React.useState('1');
   const [label, setLabel] = React.useState('Cheese');
 
@@ -36,6 +37,7 @@ export const Controlled = () => {
           console.log('form submitted');
           e.preventDefault();
         }}
+        ref={formRef}
       >
         <Flex gap="s" flexDirection="column">
           <MultiSelect items={items}>
@@ -71,7 +73,7 @@ export const Controlled = () => {
             </SecondaryButton>
             <SecondaryButton
               onClick={e => {
-                const input = document.querySelector('[name=toppings]') as HTMLInputElement;
+                const input = formRef.current.querySelector('[name=toppings]') as HTMLInputElement;
                 input.value = '1, 2';
               }}
             >