Fix type issues

packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorOptions.js

@@ -20,14 +20,18 @@ import {
 
 import styles from './SettingsShared.css';
 
+type OpenInEditorURLPreset = 'vscode' | 'custom';
+
 export default function CodeEditorOptions({
   environmentNames,
 }: {
   environmentNames: Promise<Array<string>>,
 }): React.Node {
-  const [openInEditorURLPreset, setOpenInEditorURLPreset] = useLocalStorage<
-    'vscode' | 'custom',
-  >(LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET, getDefaultPreset());
+  const [openInEditorURLPreset, setOpenInEditorURLPreset] =
+    useLocalStorage<OpenInEditorURLPreset>(
+      LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
+      getDefaultPreset(),
+    );
 
   const [openInEditorURL, setOpenInEditorURL] = useLocalStorage<string>(
     LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
@@ -39,7 +43,17 @@ export default function CodeEditorOptions({
       <select
         value={openInEditorURLPreset}
         onChange={({currentTarget}) => {
-          const selectedValue = currentTarget.value;
+          // Casting here allows an exhaustive check so that devs adding new
+          // presets will get a Flow error if they forget to update options.
+          // $FlowFixMe[incompatible-cast] We're checking the value below
+          const selectedValue = (currentTarget.value: OpenInEditorURLPreset);
+          switch (selectedValue) {
+            case 'vscode':
+            case 'custom':
+              break;
+            default:
+              (selectedValue: empty);
+          }
           setOpenInEditorURLPreset(selectedValue);
         }}>
         <option value="vscode">VS Code</option>
@@ -52,7 +66,7 @@ export default function CodeEditorOptions({
           placeholder={getDefaultOpenInEditorURL()}
           value={openInEditorURL}
           onChange={event => {
-            setOpenInEditorURL(event.target.value);
+            setOpenInEditorURL(event.currentTarget.value);
           }}
         />
       )}

packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js

@@ -6,6 +6,7 @@
  *
  * @flow
  */
+import type {DisplayDensity, Theme} from './SettingsContext';
 
 import * as React from 'react';
 import {useContext, useMemo} from 'react';
@@ -67,7 +68,21 @@ export default function GeneralSettings(_: {}): React.Node {
         <div className={styles.RadioLabel}>Theme</div>
         <select
           value={theme}
-          onChange={({currentTarget}) => setTheme(currentTarget.value)}>
+          onChange={({currentTarget}) => {
+            // Casting here allows an exhaustive check so that devs changing
+            // themes will get a Flow error if they forget to update options.
+            // $FlowFixMe[incompatible-cast] We're checking the value below
+            const value = (currentTarget.value: Theme);
+            switch (value) {
+              case 'auto':
+              case 'light':
+              case 'dark':
+                break;
+              default:
+                (value: empty);
+            }
+            setTheme(value);
+          }}>
           <option value="auto">Auto</option>
           <option value="light">Light</option>
           <option value="dark">Dark</option>
@@ -78,9 +93,20 @@ export default function GeneralSettings(_: {}): React.Node {
         <div className={styles.RadioLabel}>Display density</div>
         <select
           value={displayDensity}
-          onChange={({currentTarget}) =>
-            setDisplayDensity(currentTarget.value)
-          }>
+          onChange={({currentTarget}) => {
+            // Casting here allows an exhaustive check so that devs changing
+            // display densities will get a Flow error if they forget to update options.
+            // $FlowFixMe[incompatible-cast] We're checking the value below
+            const value = (currentTarget.value: DisplayDensity);
+            switch (value) {
+              case 'compact':
+              case 'comfortable':
+                break;
+              default:
+                (value: empty);
+            }
+            setDisplayDensity(value);
+          }}>
           <option value="compact">Compact</option>
           <option value="comfortable">Comfortable</option>
         </select>

packages/react-devtools-shell/src/app/InspectableElements/Contexts.js

@@ -226,7 +226,10 @@ function FunctionalContextConsumerWithContextUpdates() {
         {state}
         <div>
           test state:{' '}
-          <input value={state} onChange={e => setState(e.target.value)} />
+          <input
+            value={state}
+            onChange={e => setState(e.currentTarget.value)}
+          />
         </div>
       </div>
     </>
@@ -265,7 +268,10 @@ class ModernClassContextConsumerWithUpdates extends Component<any> {
               'ModernClassContextConsumerWithUpdates',
               string,
             )}
-            <input value={string} onChange={e => setString(e.target.value)} />
+            <input
+              value={string}
+              onChange={e => setString(e.currentTarget.value)}
+            />
           </>
         )}
       </StringContextWithUpdates.Consumer>

packages/react-devtools-shell/src/app/SuspenseTree/index.js

@@ -195,7 +195,7 @@ function PrimaryFallbackTest({initialSuspend}) {
       <label>
         <input
           checked={suspend}
-          onChange={e => setSuspend(e.target.checked)}
+          onChange={e => setSuspend(e.currentTarget.checked)}
           type="checkbox"
         />
         Suspend