fix(app): fix input field behavior on blur (#15035)

* fix(app): fix input field behavior on blur
Opentrons · May 3, 2024 · d6472ae · d6472ae
1 parent 0526f55
commit d6472ae
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { css } from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import {
  ALIGN_CENTER,
@@ -276,7 +276,7 @@ function Input(props: InputFieldProps): JSX.Element {
  }
  }}
  >
- <input
+ <StyledInput
  {...inputProps}
  data-testid={props.id}
  value={value}
@@ -314,3 +314,9 @@ function Input(props: InputFieldProps): JSX.Element {
  </Flex>
  )
 }
+
+const StyledInput = styled.input`
+ &::placeholder {
+ color: ${COLORS.grey40};
+ }
+`
diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx
@@ -93,6 +93,7 @@ export function ChooseProtocolSlideoutComponent(
  ] = React.useState<RunTimeParameter[]>([])
  const [currentPage, setCurrentPage] = React.useState<number>(1)
  const [hasParamError, setHasParamError] = React.useState<boolean>(false)
+ const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false)
 
  React.useEffect(() => {
  setRunTimeParametersOverrides(
@@ -229,7 +230,7 @@ export function ChooseProtocolSlideoutComponent(
  const value = runtimeParam.value as number
  const id = `InputField_${runtimeParam.variableName}_${index.toString()}`
  const error =
- Number.isNaN(value) ||
+ (Number.isNaN(value) && !isInputFocused) ||
  value < runtimeParam.min ||
  value > runtimeParam.max
  ? t(`protocol_details:value_out_of_range`, {
@@ -258,6 +259,8 @@ export function ChooseProtocolSlideoutComponent(
  caption={`${runtimeParam.min}-${runtimeParam.max}`}
  id={id}
  error={error}
+ onBlur={() => setIsInputFocused(false)}
+ onFocus={() => setIsInputFocused(true)}
  onChange={e => {
  const clone = runTimeParametersOverrides.map((parameter, i) => {
  if (i === index) {

diff --git a/app/src/organisms/ChooseRobotSlideout/index.tsx b/app/src/organisms/ChooseRobotSlideout/index.tsx
@@ -146,6 +146,7 @@ export function ChooseRobotSlideout(
  const dispatch = useDispatch<Dispatch>()
  const isScanning = useSelector((state: State) => getScanning(state))
  const [targetProps, tooltipProps] = useHoverTooltip()
+ const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false)
 
  const unhealthyReachableRobots = useSelector((state: State) =>
  getReachableRobots(state)
@@ -383,7 +384,7 @@ export function ChooseRobotSlideout(
  const value = runtimeParam.value as number
  const id = `InputField_${runtimeParam.variableName}_${index.toString()}`
  const error =
- Number.isNaN(value) ||
+ (Number.isNaN(value) && !isInputFocused) ||
  value < runtimeParam.min ||
  value > runtimeParam.max
  ? t(`value_out_of_range`, {
@@ -418,6 +419,8 @@ export function ChooseRobotSlideout(
  }
  id={id}
  error={error}
+ onBlur={() => setIsInputFocused(false)}
+ onFocus={() => setIsInputFocused(true)}
  onChange={e => {
  const clone = runTimeParametersOverrides.map((parameter, i) => {
  if (i === index) {