Fix Select component

Signed-off-by: danangarbansa <danang@canva.com>

packages/core-components/src/components/Select/Select.test.tsx

@@ -54,4 +54,16 @@ describe('<Select />', () => {
     fireEvent.click(option);
     expect(input.textContent).toBe('test 1');
   });
+
+  it('display the placeholder value when selected props updated to undefined', async () => {
+    const { getByTestId, rerender } = render(
+      <Select {...minProps} selected="test 1" />,
+    );
+
+    expect(getByTestId('select').textContent).toBe('test 1');
+
+    rerender(<Select {...minProps} selected={undefined} />);
+
+    expect(getByTestId('select').textContent).toBe('All results');
+  });
 });

packages/core-components/src/components/Select/Select.tsx

@@ -163,10 +163,8 @@ export function SelectComponent(props: SelectProps) {
   }, [triggerReset, multiple]);
 
   useEffect(() => {
-    if (selected !== undefined) {
-      setValue(selected);
-    }
-  }, [selected]);
+    setValue(selected || (multiple ? [] : ''));
+  }, [selected, multiple]);
 
   const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
     setValue(event.target.value as SelectedItems);