fix: addressed chrome browser issues (#2453)

src/core/client/framework/components/DurationField.css

@@ -2,7 +2,11 @@
   width: calc(6 * var(--mini-unit));
 }
 
-.unit {
+.select {
   height: 100%;
   min-width: calc(17 * var(--mini-unit));
 }
+
+.unit {
+  line-height: 36px;
+}

src/core/client/framework/components/DurationField.tsx

@@ -142,20 +142,6 @@ class DurationField extends Component<Props, State> {
       return null;
     }
 
-    let adornment: React.ReactNode = null;
-    if (this.state.elementCallbacks.length === 1) {
-      const unit = this.state.elementCallbacks[0];
-      adornment = (
-        <Localized
-          id="framework-durationField-unit"
-          $unit={unit}
-          $value={parseInt(this.state.value, 10)}
-        >
-          <Typography variant="bodyCopy">{unit}</Typography>
-        </Localized>
-      );
-    }
-
     return (
       <Flex itemGutter>
         <TextField
@@ -168,18 +154,27 @@ class DurationField extends Component<Props, State> {
           autoCorrect="off"
           autoCapitalize="off"
           spellCheck={false}
-          adornment={adornment}
           textAlignCenter
           aria-label="value"
         />
-        {!adornment && (
+        {this.state.elementCallbacks.length === 1 ? (
+          <Localized
+            id="framework-durationField-unit"
+            $unit={this.state.elementCallbacks[0]}
+            $value={parseInt(this.state.value, 10)}
+          >
+            <Typography variant="bodyCopy" className={styles.unit}>
+              {this.state.elementCallbacks[0]}
+            </Typography>
+          </Localized>
+        ) : (
           <SelectField
             name={`${name}-unit`}
             onChange={this.handleUnitChange}
             disabled={disabled}
             aria-label="unit"
             classes={{
-              select: styles.unit,
+              select: styles.select,
             }}
             value={(this.state.unit || this.state.units[0]).toString()}
           >

src/core/client/framework/components/__snapshots__/DurationField.spec.tsx.snap

@@ -5,7 +5,6 @@ exports[`accepts invalid input 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -22,7 +21,7 @@ exports[`accepts invalid input 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}
@@ -72,7 +71,6 @@ exports[`renders correctly with default units 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -89,7 +87,7 @@ exports[`renders correctly with default units 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}
@@ -139,7 +137,6 @@ exports[`renders correctly with specified units 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -156,7 +153,7 @@ exports[`renders correctly with specified units 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}
@@ -195,7 +192,6 @@ exports[`use best matching unit 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -212,7 +208,7 @@ exports[`use best matching unit 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}
@@ -262,7 +258,6 @@ exports[`use initial unit if 0 1`] = `
   itemGutter={true}
 >
   <withPropsOnChange(TextField)
-    adornment={null}
     aria-label="value"
     autoCapitalize="off"
     autoComplete="off"
@@ -279,7 +274,7 @@ exports[`use initial unit if 0 1`] = `
     aria-label="unit"
     classes={
       Object {
-        "select": "DurationField-unit",
+        "select": "DurationField-select",
       }
     }
     disabled={false}