fix(Select): added the "sudden removal" story

src/select/select.story.tsx

@@ -40,6 +40,48 @@ function MutatingSelect(props: any) {
   );
 }
 
+// This story describes the bug in issue https://github.com/jamesmfriedman/rmwc/issues/686
+// Selecting the first element of the first select will cause the bug
+const DependentSelects = () => {
+  const [first, setFist] = React.useState(3);
+  const [second, setSecond] = React.useState<number | undefined>(2);
+
+  return (
+    <div>
+      <Select
+        value={first.toString()}
+        label='first-select'
+        enhanced={{ focusOnOpen: false }}
+        onChange={(e: any) => {
+          setFist(parseInt(e.detail.value));
+
+          // Clear the second select to cause the bug
+          setSecond(undefined);
+        }}
+      >
+        <MenuItem data-value='1'>first-menu-item-1</MenuItem>
+        <MenuItem data-value='2'>first-menu-item-2</MenuItem>
+        <MenuItem data-value='3'>first-menu-item-3</MenuItem>
+      </Select>
+      <Select
+        value={second?.toString() || ''}
+        label='second-select'
+        enhanced={{ focusOnOpen: false }}
+        onChange={(e: any) => {
+          setSecond(e.detail.value);
+        }}
+      >
+        {Array.from(Array(first)).map((num, index) => {
+          return (
+            <MenuItem key={index} data-value={index}>
+              second-menu-item-{index}
+            </MenuItem>
+          );
+        })}
+      </Select>
+    </div>);
+}
+
 function EnhancedSelect() {
   const [value, setValue] = React.useState('');
 
@@ -381,4 +423,5 @@ storiesOf('Select', module)
         }}
       />
     );
-  });
+  })
+  .add('Interdepndent Selects', DependentSelects);