From 444c04dcdeb965b531d7508f5e82af56cfcb00f2 Mon Sep 17 00:00:00 2001
From: Jamie Rasmussen <112953339+jamie-rasmussen@users.noreply.github.com>
Date: Wed, 11 Dec 2024 18:50:14 -0600
Subject: [PATCH 1/3] chore(ui): remove some unused code (#3157)

---
 .../PagePanelComponents/Home/Browse3.tsx      | 138 +-----------------
 1 file changed, 1 insertion(+), 137 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx
index 3517f4d3b9c..761fd536930 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx
@@ -1,15 +1,5 @@
 import {ApolloProvider} from '@apollo/client';
-import {Home} from '@mui/icons-material';
-import {
-  AppBar,
-  Box,
-  Breadcrumbs,
-  Drawer,
-  IconButton,
-  Link as MaterialLink,
-  Toolbar,
-  Typography,
-} from '@mui/material';
+import {Box, Drawer} from '@mui/material';
 import {
   GridColumnVisibilityModel,
   GridFilterModel,
@@ -21,9 +11,7 @@ import {LicenseInfo} from '@mui/x-license';
 import {makeGorillaApolloClient} from '@wandb/weave/apollo';
 import {EVALUATE_OP_NAME_POST_PYDANTIC} from '@wandb/weave/components/PagePanelComponents/Home/Browse3/pages/common/heuristics';
 import {opVersionKeyToRefUri} from '@wandb/weave/components/PagePanelComponents/Home/Browse3/pages/wfReactInterface/utilities';
-import _ from 'lodash';
 import React, {
-  ComponentProps,
   FC,
   useCallback,
   useEffect,
@@ -33,7 +21,6 @@ import React, {
 } from 'react';
 import useMousetrap from 'react-hook-mousetrap';
 import {
-  Link as RouterLink,
   Redirect,
   Route,
   Switch,
@@ -199,7 +186,6 @@ export const Browse3: FC<{
               `/${URL_BROWSE3}`,
             ]}>
             <Browse3Mounted
-              hideHeader={props.hideHeader}
               headerOffset={props.headerOffset}
               navigateAwayFromProject={props.navigateAwayFromProject}
             />
@@ -211,7 +197,6 @@ export const Browse3: FC<{
 };
 
 const Browse3Mounted: FC<{
-  hideHeader?: boolean;
   headerOffset?: number;
   navigateAwayFromProject?: () => void;
 }> = props => {
@@ -225,37 +210,6 @@ const Browse3Mounted: FC<{
         overflow: 'auto',
         flexDirection: 'column',
       }}>
-      {!props.hideHeader && (
-        <AppBar
-          sx={{
-            zIndex: theme => theme.zIndex.drawer + 1,
-            height: '60px',
-            flex: '0 0 auto',
-            position: 'static',
-          }}>
-          <Toolbar
-            sx={{
-              backgroundColor: '#1976d2',
-              minHeight: '30px',
-            }}>
-            <IconButton
-              component={RouterLink}
-              to={`/`}
-              sx={{
-                color: theme =>
-                  theme.palette.getContrastText(theme.palette.primary.main),
-                '&:hover': {
-                  color: theme =>
-                    theme.palette.getContrastText(theme.palette.primary.dark),
-                },
-                marginRight: theme => theme.spacing(2),
-              }}>
-              <Home />
-            </IconButton>
-            <Browse3Breadcrumbs />
-          </Toolbar>
-        </AppBar>
-      )}
       <Switch>
         <Route path={baseRouter.projectUrl(':entity', ':project')} exact>
           <ProjectRedirect />
@@ -1050,20 +1004,6 @@ const ComparePageBinding = () => {
   return <ComparePage entity={params.entity} project={params.project} />;
 };
 
-const AppBarLink = (props: ComponentProps<typeof RouterLink>) => (
-  <MaterialLink
-    sx={{
-      color: theme => theme.palette.getContrastText(theme.palette.primary.main),
-      '&:hover': {
-        color: theme =>
-          theme.palette.getContrastText(theme.palette.primary.dark),
-      },
-    }}
-    {...props}
-    component={RouterLink}
-  />
-);
-
 const PlaygroundPageBinding = () => {
   const params = useParamsDecoded<Browse3TabItemParams>();
   return (
@@ -1074,79 +1014,3 @@ const PlaygroundPageBinding = () => {
     />
   );
 };
-
-const Browse3Breadcrumbs: FC = props => {
-  const params = useParamsDecoded<Browse3Params>();
-  const query = useURLSearchParamsDict();
-  const filePathParts = query.path?.split('/') ?? [];
-  const refFields = query.extra?.split('/') ?? [];
-
-  return (
-    <Breadcrumbs>
-      {params.entity && (
-        <AppBarLink to={`/${URL_BROWSE3}/${params.entity}`}>
-          {params.entity}
-        </AppBarLink>
-      )}
-      {params.project && (
-        <AppBarLink to={`/${URL_BROWSE3}/${params.entity}/${params.project}`}>
-          {params.project}
-        </AppBarLink>
-      )}
-      {params.tab && (
-        <AppBarLink
-          to={`/${URL_BROWSE3}/${params.entity}/${params.project}/${params.tab}`}>
-          {params.tab}
-        </AppBarLink>
-      )}
-      {params.itemName && (
-        <AppBarLink
-          to={`/${URL_BROWSE3}/${params.entity}/${params.project}/${params.tab}/${params.itemName}`}>
-          {params.itemName}
-        </AppBarLink>
-      )}
-      {params.version && (
-        <AppBarLink
-          to={`/${URL_BROWSE3}/${params.entity}/${params.project}/${params.tab}/${params.itemName}/versions/${params.version}`}>
-          {params.version}
-        </AppBarLink>
-      )}
-      {filePathParts.map((part, idx) => (
-        <AppBarLink
-          key={idx}
-          to={`/${URL_BROWSE3}/${params.entity}/${params.project}/${
-            params.tab
-          }/${params.itemName}/versions/${
-            params.version
-          }?path=${encodeURIComponent(
-            filePathParts.slice(0, idx + 1).join('/')
-          )}`}>
-          {part}
-        </AppBarLink>
-      ))}
-      {_.range(0, refFields.length, 2).map(idx => (
-        <React.Fragment key={idx}>
-          <Typography
-            sx={{
-              color: theme =>
-                theme.palette.getContrastText(theme.palette.primary.main),
-            }}>
-            {refFields[idx]}
-          </Typography>
-          <AppBarLink
-            to={`/${URL_BROWSE3}/${params.entity}/${params.project}/${
-              params.tab
-            }/${params.itemName}/versions/${
-              params.version
-            }?path=${encodeURIComponent(
-              filePathParts.join('/')
-            )}&extra=${encodeURIComponent(
-              refFields.slice(0, idx + 2).join('/')
-            )}`}>
-            {refFields[idx + 1]}
-          </AppBarLink>
-        </React.Fragment>
-      ))}
-    </Breadcrumbs>
-  );
-};

From 96d1d0d0f48cd571ae7b7737de2fd58d663588d9 Mon Sep 17 00:00:00 2001
From: Griffin Tarpenning <griffin.tarpenning@wandb.com>
Date: Wed, 11 Dec 2024 17:55:26 -0800
Subject: [PATCH 2/3] chore(ui): Create scorer drawer style + small annotation
 drawer style tweaks (#3186)

---
 .../StructuredFeedback/HumanAnnotation.tsx    |   4 +-
 .../ScorersPage/AnnotationScorerForm.tsx      |   9 +-
 .../pages/ScorersPage/FormComponents.tsx      |   2 +-
 .../pages/ScorersPage/NewScorerDrawer.tsx     |  25 +++-
 .../pages/ScorersPage/ZodSchemaForm.tsx       | 133 +++++++++++-------
 5 files changed, 111 insertions(+), 62 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/HumanAnnotation.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/HumanAnnotation.tsx
index 7facffe9556..2821c02affa 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/HumanAnnotation.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/HumanAnnotation.tsx
@@ -415,7 +415,7 @@ export const TextFeedbackColumn = ({
         placeholder=""
       />
       {maxLength && (
-        <div className="mb-1 text-xs text-moon-500">
+        <div className="mb-1 mt-4 text-xs text-moon-500">
           {`Maximum characters: ${maxLength}`}
         </div>
       )}
@@ -603,7 +603,7 @@ export const NumericalTextField: React.FC<NumericalTextFieldProps> = ({
         errorState={error}
       />
       {(min != null || max != null) && (
-        <div className="mb-1 text-xs text-moon-500">
+        <div className="mb-1 mt-4 text-xs text-moon-500">
           {isInteger ? 'Integer required. ' : ''}
           {min != null && `Min: ${min}`}
           {min != null && max != null && ', '}
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/AnnotationScorerForm.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/AnnotationScorerForm.tsx
index 9acbdfe6c2f..a478437facb 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/AnnotationScorerForm.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/AnnotationScorerForm.tsx
@@ -1,5 +1,5 @@
 import {Box} from '@material-ui/core';
-import React, {FC, useCallback, useState} from 'react';
+import React, {FC, useCallback, useEffect, useState} from 'react';
 import {z} from 'zod';
 
 import {createBaseObjectInstance} from '../wfReactInterface/baseObjectClassQuery';
@@ -28,7 +28,7 @@ const AnnotationScorerFormSchema = z.object({
     }),
     z.object({
       type: z.literal('String'),
-      'Max length': z.number().optional(),
+      'Maximum length': z.number().optional(),
     }),
     z.object({
       type: z.literal('Select'),
@@ -45,6 +45,9 @@ export const AnnotationScorerForm: FC<
   ScorerFormProps<z.infer<typeof AnnotationScorerFormSchema>>
 > = ({data, onDataChange}) => {
   const [config, setConfig] = useState(data ?? DEFAULT_STATE);
+  useEffect(() => {
+    setConfig(data ?? DEFAULT_STATE);
+  }, [data]);
   const [isValid, setIsValid] = useState(false);
 
   const handleConfigChange = useCallback(
@@ -113,7 +116,7 @@ function convertTypeExtrasToJsonSchema(
   const typeSchema = obj.Type;
   const typeExtras: Record<string, any> = {};
   if (typeSchema.type === 'String') {
-    typeExtras.maxLength = typeSchema['Max length'];
+    typeExtras.maxLength = typeSchema['Maximum length'];
   } else if (typeSchema.type === 'Integer' || typeSchema.type === 'Number') {
     typeExtras.minimum = typeSchema.Minimum;
     typeExtras.maximum = typeSchema.Maximum;
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/FormComponents.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/FormComponents.tsx
index 2716bfbfa81..250c896cfea 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/FormComponents.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/FormComponents.tsx
@@ -3,7 +3,7 @@ import {Select} from '@wandb/weave/components/Form/Select';
 import {TextField} from '@wandb/weave/components/Form/TextField';
 import React from 'react';
 
-export const GAP_BETWEEN_ITEMS_PX = 10;
+export const GAP_BETWEEN_ITEMS_PX = 16;
 export const GAP_BETWEEN_LABEL_AND_FIELD_PX = 10;
 
 type AutocompleteWithLabelType<Option = any> = (
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/NewScorerDrawer.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/NewScorerDrawer.tsx
index 80f4cedd3f6..96621b142f0 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/NewScorerDrawer.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/NewScorerDrawer.tsx
@@ -138,11 +138,16 @@ export const NewScorerDrawer: FC<NewScorerDrawerProps> = ({
     );
   }, [showRunnableUI]);
 
+  const handleClose = () => {
+    setFormData(null);
+    onClose();
+  };
+
   return (
     <SaveableDrawer
       open={open}
       title="Create scorer"
-      onClose={onClose}
+      onClose={handleClose}
       onSave={onSave}
       saveDisabled={!isFormValid}>
       <AutocompleteWithLabel
@@ -208,12 +213,22 @@ export const SaveableDrawer: FC<SaveableDrawerProps> = ({
           sx={{
             flex: '0 0 auto',
             borderBottom: '1px solid #e0e0e0',
-            p: '10px',
+            px: '24px',
+            py: '20px',
             display: 'flex',
             fontWeight: 600,
+            fontSize: '24px',
+            lineHeight: '40px',
           }}>
           <Box sx={{flexGrow: 1}}>{title}</Box>
-          <Button size="small" variant="quiet" icon="close" onClick={onClose} />
+          <Box>
+            <Button
+              size="large"
+              variant="quiet"
+              icon="close"
+              onClick={onClose}
+            />
+          </Box>
         </Box>
 
         <Box
@@ -230,11 +245,13 @@ export const SaveableDrawer: FC<SaveableDrawerProps> = ({
             display: 'flex',
             flex: '0 0 auto',
             borderTop: '1px solid #e0e0e0',
-            p: '10px',
+            px: '24px',
+            py: '20px',
           }}>
           <Button
             onClick={onSave}
             color="primary"
+            size="large"
             disabled={saveDisabled}
             className="w-full">
             Create scorer
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/ZodSchemaForm.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/ZodSchemaForm.tsx
index 473a2ebcba7..94106a7a3b2 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/ZodSchemaForm.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ScorersPage/ZodSchemaForm.tsx
@@ -163,8 +163,13 @@ const NestedForm: React.FC<{
   hideLabel,
   autoFocus,
 }) => {
-  const currentPath = [...path, keyName];
-  const currentValue = getNestedValue(config, currentPath);
+  const currentPath = useMemo(() => [...path, keyName], [path, keyName]);
+  const [currentValue, setCurrentValue] = useState(
+    getNestedValue(config, currentPath)
+  );
+  useEffect(() => {
+    setCurrentValue(getNestedValue(config, currentPath));
+  }, [config, currentPath]);
 
   const unwrappedSchema = unwrapSchema(fieldSchema);
 
@@ -289,9 +294,11 @@ const NestedForm: React.FC<{
   } else if (isZodType(fieldSchema, s => s instanceof z.ZodBoolean)) {
     fieldType = 'checkbox';
   }
+  const isOptional = fieldSchema instanceof z.ZodOptional;
 
   return (
     <TextFieldWithLabel
+      isOptional={isOptional}
       label={!hideLabel ? keyName : undefined}
       type={fieldType}
       value={currentValue ?? ''}
@@ -345,58 +352,72 @@ const ArrayField: React.FC<{
           <DescriptionTooltip description={fieldDescription} />
         )}
       </Box>
-      {arrayValue.map((item, index) => (
-        <Box
-          key={index}
-          display="flex"
-          flexDirection="column"
-          alignItems="flex-start"
-          style={{
-            width: '100%',
-            gap: 4,
-            alignItems: 'center',
-            height: '35px',
-            marginBottom: '4px',
-          }}>
-          <Box flexGrow={1} width="100%" display="flex" alignItems="center">
-            <Box flexGrow={1}>
-              <NestedForm
-                keyName={`${index}`}
-                fieldSchema={elementSchema}
-                config={{[`${index}`]: item}}
-                setConfig={newItemConfig => {
-                  const newArray = [...arrayValue];
-                  newArray[index] = newItemConfig[`${index}`];
-                  updateConfig(targetPath, newArray, config, setConfig);
-                }}
-                path={[]}
-                hideLabel
-                autoFocus={index === arrayValue.length - 1}
-              />
-            </Box>
-            <Box mb={2} ml={1}>
-              <Button
-                size="small"
-                variant="ghost"
-                icon="delete"
-                tooltip="Remove this entry"
-                disabled={arrayValue.length <= minItems}
-                onClick={() =>
-                  removeArrayItem(targetPath, index, config, setConfig)
-                }
-              />
+      <Box border="1px solid #e0e0e0" borderRadius="4px" p={2}>
+        {arrayValue.map((item, index) => (
+          <Box
+            key={index}
+            display="flex"
+            flexDirection="column"
+            alignItems="flex-start"
+            style={{
+              width: '100%',
+              gap: 4,
+              alignItems: 'center',
+              height: '35px',
+              marginBottom: '16px',
+              marginTop: '8px',
+              marginLeft: '8px',
+            }}>
+            <Box flexGrow={1} width="100%" display="flex" alignItems="center">
+              <Box flexGrow={1}>
+                <NestedForm
+                  keyName={`${index}`}
+                  fieldSchema={elementSchema}
+                  config={{[`${index}`]: item}}
+                  setConfig={newItemConfig => {
+                    const newArray = [...arrayValue];
+                    newArray[index] = newItemConfig[`${index}`];
+                    updateConfig(targetPath, newArray, config, setConfig);
+                  }}
+                  path={[]}
+                  hideLabel
+                  autoFocus={index === arrayValue.length - 1}
+                />
+              </Box>
+              <Box mb={4} ml={4} mr={4}>
+                <Button
+                  size="small"
+                  variant="ghost"
+                  icon="delete"
+                  tooltip="Remove this entry"
+                  disabled={arrayValue.length <= minItems}
+                  onClick={() =>
+                    removeArrayItem(targetPath, index, config, setConfig)
+                  }
+                />
+              </Box>
             </Box>
           </Box>
+        ))}
+        <Box mt={2} style={{width: '100%'}}>
+          <Button
+            variant="secondary"
+            icon="add-new"
+            className="w-full"
+            style={{
+              padding: '4px',
+              width: '100%',
+              marginLeft: '8px',
+              marginRight: '8px',
+              marginBottom: '8px',
+            }}
+            onClick={() =>
+              addArrayItem(targetPath, elementSchema, config, setConfig)
+            }>
+            Add item
+          </Button>
         </Box>
-      ))}
-      <Button
-        variant="secondary"
-        style={{padding: '4px', width: '100%'}}
-        onClick={() =>
-          addArrayItem(targetPath, elementSchema, config, setConfig)
-        }>
-        Add item
-      </Button>
+      </Box>
     </FormControl>
   );
 };
@@ -758,6 +779,7 @@ const LiteralField: React.FC<{
   setConfig,
 }) => {
   const literalValue = unwrappedSchema.value;
+  const isOptional = fieldSchema instanceof z.ZodOptional;
 
   useEffect(() => {
     if (value !== literalValue) {
@@ -765,7 +787,14 @@ const LiteralField: React.FC<{
     }
   }, [value, literalValue, targetPath, config, setConfig]);
 
-  return <TextFieldWithLabel label={keyName} disabled value={literalValue} />;
+  return (
+    <TextFieldWithLabel
+      isOptional={isOptional}
+      label={keyName}
+      disabled
+      value={literalValue}
+    />
+  );
 };
 
 const BooleanField: React.FC<{

From 3acb3d38b8022ba9cd8773df36535a5c5f361e1b Mon Sep 17 00:00:00 2001
From: Griffin Tarpenning <griffin.tarpenning@wandb.com>
Date: Wed, 11 Dec 2024 18:10:49 -0800
Subject: [PATCH 3/3] chore(ui): fix save state in human annotations when null
 or invalid (#3185)

---
 .../StructuredFeedback/HumanAnnotation.tsx    | 50 +++++++++----------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/HumanAnnotation.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/HumanAnnotation.tsx
index 2821c02affa..21dedf10ea0 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/HumanAnnotation.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/feedback/StructuredFeedback/HumanAnnotation.tsx
@@ -53,17 +53,11 @@ export const HumanAnnotationCell: React.FC<HumanAnnotationProps> = props => {
   const feedbackSpecRef = props.hfSpec.ref;
 
   useEffect(() => {
-    if (!props.readOnly) {
-      // We don't need to listen for feedback changes if the cell is editable
-      // it is being controlled by local state
-      return;
-    }
     return getTsClient().registerOnFeedbackListener(
       props.callRef,
       query.refetch
     );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.callRef]);
+  }, [props.callRef, query.refetch, getTsClient]);
 
   useEffect(() => {
     if (foundFeedbackCallRef && props.callRef !== foundFeedbackCallRef) {
@@ -183,13 +177,22 @@ const FeedbackComponentSelector: React.FC<{
   }) => {
     const wrappedOnAddFeedback = useCallback(
       async (value: any) => {
+        if (value == null || value === foundValue || value === '') {
+          // Remove from unsaved changes if value is invalid
+          setUnsavedFeedbackChanges(curr => {
+            const rest = {...curr};
+            delete rest[feedbackSpecRef];
+            return rest;
+          });
+          return true;
+        }
         setUnsavedFeedbackChanges(curr => ({
           ...curr,
           [feedbackSpecRef]: () => onAddFeedback(value),
         }));
         return true;
       },
-      [onAddFeedback, setUnsavedFeedbackChanges, feedbackSpecRef]
+      [onAddFeedback, setUnsavedFeedbackChanges, feedbackSpecRef, foundValue]
     );
 
     switch (type) {
@@ -346,21 +349,10 @@ export const NumericalFeedbackColumn = ({
   focused?: boolean;
   isInteger?: boolean;
 }) => {
-  const debouncedFn = useMemo(
-    () =>
-      _.debounce((val: number | null) => onAddFeedback?.(val), DEBOUNCE_VAL),
-    [onAddFeedback]
-  );
-  useEffect(() => {
-    return () => {
-      debouncedFn.cancel();
-    };
-  }, [debouncedFn]);
-
   return (
     <NumericalTextField
       value={defaultValue}
-      onChange={debouncedFn}
+      onChange={value => onAddFeedback?.(value)}
       min={min}
       max={max}
       isInteger={isInteger}
@@ -446,7 +438,7 @@ export const EnumFeedbackColumn = ({
     }));
     return opts;
   }, [options]);
-  const [value, setValue] = useState<Option | undefined>(undefined);
+  const [value, setValue] = useState<Option | null>(null);
 
   useEffect(() => {
     const found = dropdownOptions.find(option => option.value === defaultValue);
@@ -457,17 +449,19 @@ export const EnumFeedbackColumn = ({
 
   const onValueChange = useCallback(
     (newValue: Option | null) => {
-      if (newValue == null || newValue.value === value?.value) {
-        return;
-      }
       setValue(newValue);
-      onAddFeedback?.(newValue.value);
+      onAddFeedback?.(newValue?.value ?? '');
     },
-    [value?.value, onAddFeedback]
+    [onAddFeedback]
   );
 
   return (
-    <Select options={dropdownOptions} value={value} onChange={onValueChange} />
+    <Select
+      autoFocus={focused}
+      options={dropdownOptions}
+      value={value}
+      onChange={onValueChange}
+    />
   );
 };
 
@@ -573,6 +567,7 @@ export const NumericalTextField: React.FC<NumericalTextFieldProps> = ({
       // If val is null but v isn't empty, there's a format error
       if (val === null) {
         setError(true);
+        onChange(null);
         return;
       }
 
@@ -582,6 +577,7 @@ export const NumericalTextField: React.FC<NumericalTextFieldProps> = ({
         (max != null && parsedVal > max)
       ) {
         setError(true);
+        onChange(null);
         return;
       }