From 820fabbddaa50415307c449a7ee0466dbe3f2c97 Mon Sep 17 00:00:00 2001 From: koji Date: Wed, 8 May 2024 19:04:53 -0400 Subject: [PATCH 1/8] fix(app): fix input field caret position issue fix input field caret position issue close RQA-2697 --- app/src/atoms/InputField/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx index f891b580c6c..d6d281918cf 100644 --- a/app/src/atoms/InputField/index.tsx +++ b/app/src/atoms/InputField/index.tsx @@ -279,9 +279,11 @@ function Input(props: InputFieldProps): JSX.Element { event.currentTarget.blur()} // prevent value change with scrolling + type={props.type} /> {props.units != null ? ( {props.units} From 12f62f3d49e38baf6d5217959a0d4e35a2b4b3f5 Mon Sep 17 00:00:00 2001 From: koji Date: Thu, 9 May 2024 12:28:22 -0400 Subject: [PATCH 2/8] fix(app): fix password input field behavior fix password input field behavior close RQA-2697 --- app/src/atoms/InputField/index.tsx | 678 ++++++++++++------ .../organisms/NetworkSettings/SetWifiCred.tsx | 31 +- 2 files changed, 486 insertions(+), 223 deletions(-) diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx index d6d281918cf..50327601542 100644 --- a/app/src/atoms/InputField/index.tsx +++ b/app/src/atoms/InputField/index.tsx @@ -75,247 +75,487 @@ export interface InputFieldProps { | typeof TYPOGRAPHY.textAlignCenter /** small or medium input field height, relevant only */ size?: 'medium' | 'small' + /** react useRef for controlling focus on ODD */ + ref?: React.MutableRefObject } -export function InputField(props: InputFieldProps): JSX.Element { - return ( - - - - ) -} +export const InputField = React.forwardRef( + (props, ref): JSX.Element => { + const { + placeholder, + textAlign = TYPOGRAPHY.textAlignLeft, + size = 'small', + title, + tooltipText, + tabIndex = 0, + ...inputProps + } = props + const hasError = props.error != null + const value = props.isIndeterminate ?? false ? '' : props.value ?? '' + const placeHolder = props.isIndeterminate ?? false ? '-' : props.placeholder + const [targetProps, tooltipProps] = useHoverTooltip() -function Input(props: InputFieldProps): JSX.Element { - const { - placeholder, - textAlign = TYPOGRAPHY.textAlignLeft, - size = 'small', - title, - tooltipText, - tabIndex = 0, - ...inputProps - } = props - const hasError = props.error != null - const value = props.isIndeterminate ?? false ? '' : props.value ?? '' - const placeHolder = props.isIndeterminate ?? false ? '-' : props.placeholder - const [targetProps, tooltipProps] = useHoverTooltip() - - const OUTER_CSS = css` - @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - grid-gap: ${SPACING.spacing8}; - &:focus-within { - filter: ${hasError - ? 'none' - : `drop-shadow(0px 0px 10px ${COLORS.blue50})`}; + const OUTER_CSS = css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + grid-gap: ${SPACING.spacing8}; + &:focus-within { + filter: ${hasError + ? 'none' + : `drop-shadow(0px 0px 10px ${COLORS.blue50})`}; + } } - } - ` - - const INPUT_FIELD = css` - display: flex; - background-color: ${COLORS.white}; - border-radius: ${BORDERS.borderRadius4}; - padding: ${SPACING.spacing8}; - border: 1px ${BORDERS.styleSolid} ${hasError ? COLORS.red50 : COLORS.grey50}; - font-size: ${TYPOGRAPHY.fontSizeP}; - width: 100%; - height: 2rem; - - &:active:enabled { - border: 1px ${BORDERS.styleSolid} ${COLORS.blue50}; - } - - & input { - border-radius: inherit; - color: ${COLORS.black90}; - border: none; - flex: 1 1 auto; - width: 100%; - height: ${SPACING.spacing16}; - text-align: ${textAlign}; - } - & input:focus { - outline: none; - } + ` - &:hover { + const INPUT_FIELD = css` + display: flex; + background-color: ${COLORS.white}; + border-radius: ${BORDERS.borderRadius4}; + padding: ${SPACING.spacing8}; border: 1px ${BORDERS.styleSolid} - ${hasError ? COLORS.red50 : COLORS.grey60}; - } - - &:focus-visible { - border: 1px ${BORDERS.styleSolid} ${COLORS.grey55}; - outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50}; - outline-offset: 2px; - } - - &:focus-within { - border: 1px ${BORDERS.styleSolid} - ${hasError ? COLORS.red50 : COLORS.blue50}; - } - - &:disabled { - border: 1px ${BORDERS.styleSolid} ${COLORS.grey30}; - } - input[type='number']::-webkit-inner-spin-button, - input[type='number']::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; - } - - @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - height: ${size === 'small' ? '4.25rem' : '5rem'}; - font-size: ${TYPOGRAPHY.fontSize28}; - padding: ${SPACING.spacing16} ${SPACING.spacing24}; - border: 2px ${BORDERS.styleSolid} ${hasError ? COLORS.red50 : COLORS.grey50}; + font-size: ${TYPOGRAPHY.fontSizeP}; + width: 100%; + height: 2rem; - &:focus-within { - box-shadow: none; - border: ${hasError ? '2px' : '3px'} ${BORDERS.styleSolid} - ${hasError ? COLORS.red50 : COLORS.blue50}; + &:active:enabled { + border: 1px ${BORDERS.styleSolid} ${COLORS.blue50}; } & input { + border-radius: inherit; color: ${COLORS.black90}; + border: none; flex: 1 1 auto; width: 100%; - height: 100%; + height: ${SPACING.spacing16}; + text-align: ${textAlign}; + } + & input:focus { + outline: none; + } + + &:hover { + border: 1px ${BORDERS.styleSolid} + ${hasError ? COLORS.red50 : COLORS.grey60}; + } + + &:focus-visible { + border: 1px ${BORDERS.styleSolid} ${COLORS.grey55}; + outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50}; + outline-offset: 2px; + } + + &:focus-within { + border: 1px ${BORDERS.styleSolid} + ${hasError ? COLORS.red50 : COLORS.blue50}; + } + + &:disabled { + border: 1px ${BORDERS.styleSolid} ${COLORS.grey30}; + } + input[type='number']::-webkit-inner-spin-button, + input[type='number']::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + height: ${size === 'small' ? '4.25rem' : '5rem'}; font-size: ${TYPOGRAPHY.fontSize28}; - line-height: ${TYPOGRAPHY.lineHeight36}; + padding: ${SPACING.spacing16} ${SPACING.spacing24}; + border: 2px ${BORDERS.styleSolid} + ${hasError ? COLORS.red50 : COLORS.grey50}; + + &:focus-within { + box-shadow: none; + border: ${hasError ? '2px' : '3px'} ${BORDERS.styleSolid} + ${hasError ? COLORS.red50 : COLORS.blue50}; + } + + & input { + color: ${COLORS.black90}; + flex: 1 1 auto; + width: 100%; + height: 100%; + font-size: ${TYPOGRAPHY.fontSize28}; + line-height: ${TYPOGRAPHY.lineHeight36}; + } } - } - ` - - const FORM_BOTTOM_SPACE_STYLE = css` - padding-top: ${SPACING.spacing4}; - @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - padding: ${SPACING.spacing8} 0rem; - padding-bottom: 0; - } - ` - - const TITLE_STYLE = css` - color: ${hasError ? COLORS.red50 : COLORS.black90}; - padding-bottom: ${SPACING.spacing8}; - text-align: ${textAlign}; - @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - font-size: ${TYPOGRAPHY.fontSize22}; - font-weight: ${TYPOGRAPHY.fontWeightRegular}; - line-height: ${TYPOGRAPHY.lineHeight28}; - justify-content: ${textAlign}; - } - ` - - const ERROR_TEXT_STYLE = css` - color: ${COLORS.red50}; - padding-top: ${SPACING.spacing4}; - @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - font-size: ${TYPOGRAPHY.fontSize22}; + ` + + const FORM_BOTTOM_SPACE_STYLE = css` + padding-top: ${SPACING.spacing4}; + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + padding: ${SPACING.spacing8} 0rem; + padding-bottom: 0; + } + ` + + const TITLE_STYLE = css` + color: ${hasError ? COLORS.red50 : COLORS.black90}; + padding-bottom: ${SPACING.spacing8}; + text-align: ${textAlign}; + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + font-size: ${TYPOGRAPHY.fontSize22}; + font-weight: ${TYPOGRAPHY.fontWeightRegular}; + line-height: ${TYPOGRAPHY.lineHeight28}; + justify-content: ${textAlign}; + } + ` + + const ERROR_TEXT_STYLE = css` color: ${COLORS.red50}; - padding-top: ${SPACING.spacing8}; - } - ` - - const UNITS_STYLE = css` - color: ${props.disabled ? COLORS.grey40 : COLORS.grey50}; - font-size: ${TYPOGRAPHY.fontSizeLabel}; - font-weight: ${TYPOGRAPHY.fontWeightSemiBold}; - line-height: ${TYPOGRAPHY.lineHeight12}; - align-text: ${TEXT_ALIGN_RIGHT}; - @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + padding-top: ${SPACING.spacing4}; + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + font-size: ${TYPOGRAPHY.fontSize22}; + color: ${COLORS.red50}; + padding-top: ${SPACING.spacing8}; + } + ` + + const UNITS_STYLE = css` color: ${props.disabled ? COLORS.grey40 : COLORS.grey50}; - font-size: ${TYPOGRAPHY.fontSize22}; - font-weight: ${TYPOGRAPHY.fontWeightRegular}; - line-height: ${TYPOGRAPHY.lineHeight28}; - justify-content: ${textAlign}; - } - ` - - return ( - - {title != null ? ( - - - {title} - - {tooltipText != null ? ( - <> - - - - {tooltipText} - + font-size: ${TYPOGRAPHY.fontSizeLabel}; + font-weight: ${TYPOGRAPHY.fontWeightSemiBold}; + line-height: ${TYPOGRAPHY.lineHeight12}; + align-text: ${TEXT_ALIGN_RIGHT}; + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + color: ${props.disabled ? COLORS.grey40 : COLORS.grey50}; + font-size: ${TYPOGRAPHY.fontSize22}; + font-weight: ${TYPOGRAPHY.fontWeightRegular}; + line-height: ${TYPOGRAPHY.lineHeight28}; + justify-content: ${textAlign}; + } + ` + + return ( + + + {title != null ? ( + + + {title} + + {tooltipText != null ? ( + <> + + + + {tooltipText} + + ) : null} + ) : null} - - ) : null} - - { - if (props.id != null) { - document.getElementById(props.id)?.focus() - } - }} - > - event.currentTarget.blur()} // prevent value change with scrolling - type={props.type} - /> - {props.units != null ? ( - {props.units} + + { + if (props.id != null) { + document.getElementById(props.id)?.focus() + } + }} + > + event.currentTarget.blur()} // prevent value change with scrolling + type={props.type} + ref={ref} + /> + {props.units != null ? ( + {props.units} + ) : null} + + + {props.caption != null ? ( + + {props.caption} + + ) : null} + {props.secondaryCaption != null ? ( + + {props.secondaryCaption} + + ) : null} + {hasError ? ( + + {props.error} + ) : null} - {props.caption != null ? ( - - {props.caption} - - ) : null} - {props.secondaryCaption != null ? ( - - {props.secondaryCaption} - - ) : null} - {hasError ? ( - - {props.error} - - ) : null} - - ) -} + ) + } +) + +// export function InputField(props: InputFieldProps): JSX.Element { +// return ( +// +// +// +// ) +// } + +// function Input(props: InputFieldProps): JSX.Element { +// const { +// placeholder, +// textAlign = TYPOGRAPHY.textAlignLeft, +// size = 'small', +// title, +// tooltipText, +// tabIndex = 0, +// ref, +// ...inputProps +// } = props +// const hasError = props.error != null +// const value = props.isIndeterminate ?? false ? '' : props.value ?? '' +// const placeHolder = props.isIndeterminate ?? false ? '-' : props.placeholder +// const [targetProps, tooltipProps] = useHoverTooltip() + +// const OUTER_CSS = css` +// @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { +// grid-gap: ${SPACING.spacing8}; +// &:focus-within { +// filter: ${hasError +// ? 'none' +// : `drop-shadow(0px 0px 10px ${COLORS.blue50})`}; +// } +// } +// ` + +// const INPUT_FIELD = css` +// display: flex; +// background-color: ${COLORS.white}; +// border-radius: ${BORDERS.borderRadius4}; +// padding: ${SPACING.spacing8}; +// border: 1px ${BORDERS.styleSolid} ${hasError ? COLORS.red50 : COLORS.grey50}; +// font-size: ${TYPOGRAPHY.fontSizeP}; +// width: 100%; +// height: 2rem; + +// &:active:enabled { +// border: 1px ${BORDERS.styleSolid} ${COLORS.blue50}; +// } + +// & input { +// border-radius: inherit; +// color: ${COLORS.black90}; +// border: none; +// flex: 1 1 auto; +// width: 100%; +// height: ${SPACING.spacing16}; +// text-align: ${textAlign}; +// } +// & input:focus { +// outline: none; +// } + +// &:hover { +// border: 1px ${BORDERS.styleSolid} +// ${hasError ? COLORS.red50 : COLORS.grey60}; +// } + +// &:focus-visible { +// border: 1px ${BORDERS.styleSolid} ${COLORS.grey55}; +// outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50}; +// outline-offset: 2px; +// } + +// &:focus-within { +// border: 1px ${BORDERS.styleSolid} +// ${hasError ? COLORS.red50 : COLORS.blue50}; +// } + +// &:disabled { +// border: 1px ${BORDERS.styleSolid} ${COLORS.grey30}; +// } +// input[type='number']::-webkit-inner-spin-button, +// input[type='number']::-webkit-outer-spin-button { +// -webkit-appearance: none; +// margin: 0; +// } + +// @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { +// height: ${size === 'small' ? '4.25rem' : '5rem'}; +// font-size: ${TYPOGRAPHY.fontSize28}; +// padding: ${SPACING.spacing16} ${SPACING.spacing24}; +// border: 2px ${BORDERS.styleSolid} +// ${hasError ? COLORS.red50 : COLORS.grey50}; + +// &:focus-within { +// box-shadow: none; +// border: ${hasError ? '2px' : '3px'} ${BORDERS.styleSolid} +// ${hasError ? COLORS.red50 : COLORS.blue50}; +// } + +// & input { +// color: ${COLORS.black90}; +// flex: 1 1 auto; +// width: 100%; +// height: 100%; +// font-size: ${TYPOGRAPHY.fontSize28}; +// line-height: ${TYPOGRAPHY.lineHeight36}; +// } +// } +// ` + +// const FORM_BOTTOM_SPACE_STYLE = css` +// padding-top: ${SPACING.spacing4}; +// @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { +// padding: ${SPACING.spacing8} 0rem; +// padding-bottom: 0; +// } +// ` + +// const TITLE_STYLE = css` +// color: ${hasError ? COLORS.red50 : COLORS.black90}; +// padding-bottom: ${SPACING.spacing8}; +// text-align: ${textAlign}; +// @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { +// font-size: ${TYPOGRAPHY.fontSize22}; +// font-weight: ${TYPOGRAPHY.fontWeightRegular}; +// line-height: ${TYPOGRAPHY.lineHeight28}; +// justify-content: ${textAlign}; +// } +// ` + +// const ERROR_TEXT_STYLE = css` +// color: ${COLORS.red50}; +// padding-top: ${SPACING.spacing4}; +// @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { +// font-size: ${TYPOGRAPHY.fontSize22}; +// color: ${COLORS.red50}; +// padding-top: ${SPACING.spacing8}; +// } +// ` + +// const UNITS_STYLE = css` +// color: ${props.disabled ? COLORS.grey40 : COLORS.grey50}; +// font-size: ${TYPOGRAPHY.fontSizeLabel}; +// font-weight: ${TYPOGRAPHY.fontWeightSemiBold}; +// line-height: ${TYPOGRAPHY.lineHeight12}; +// align-text: ${TEXT_ALIGN_RIGHT}; +// @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { +// color: ${props.disabled ? COLORS.grey40 : COLORS.grey50}; +// font-size: ${TYPOGRAPHY.fontSize22}; +// font-weight: ${TYPOGRAPHY.fontWeightRegular}; +// line-height: ${TYPOGRAPHY.lineHeight28}; +// justify-content: ${textAlign}; +// } +// ` + +// return ( +// +// {title != null ? ( +// +// +// {title} +// +// {tooltipText != null ? ( +// <> +// +// +// +// {tooltipText} +// +// ) : null} +// +// ) : null} +// +// { +// if (props.id != null) { +// document.getElementById(props.id)?.focus() +// } +// }} +// > +// event.currentTarget.blur()} // prevent value change with scrolling +// type={props.type} +// ref={ref} +// /> +// {props.units != null ? ( +// {props.units} +// ) : null} +// +// +// {props.caption != null ? ( +// +// {props.caption} +// +// ) : null} +// {props.secondaryCaption != null ? ( +// +// {props.secondaryCaption} +// +// ) : null} +// {hasError ? ( +// +// {props.error} +// +// ) : null} +// +// ) +// } const StyledInput = styled.input` &::placeholder { diff --git a/app/src/organisms/NetworkSettings/SetWifiCred.tsx b/app/src/organisms/NetworkSettings/SetWifiCred.tsx index 34cbef2330f..485bc28ec8f 100644 --- a/app/src/organisms/NetworkSettings/SetWifiCred.tsx +++ b/app/src/organisms/NetworkSettings/SetWifiCred.tsx @@ -32,8 +32,21 @@ export function SetWifiCred({ const { t } = useTranslation(['device_settings', 'shared']) const keyboardRef = React.useRef(null) const [showPassword, setShowPassword] = React.useState(false) + const inputRef = React.useRef(null) const isUnboxingFlowOngoing = useIsUnboxingFlowOngoing() + const handleBlur = (): void => { + if (inputRef.current != null) inputRef.current?.focus() + } + + React.useEffect(() => { + if (inputRef.current != null || password.length > 0) { + console.log('hello') + console.log(inputRef?.current) + inputRef?.current?.focus() + } + }, [password]) + return ( <> setPassword(e.target.value)} type={showPassword ? 'text' : 'password'} - onBlur={e => e.target.focus()} + onBlur={handleBlur} + ref={inputRef} autoFocus /> setShowPassword(currentState => !currentState)} + onClick={() => { + setShowPassword(currentState => !currentState) + const input = document.querySelector('input') + console.log('onclick') + console.log(input) + inputRef?.current?.focus() + input?.setSelectionRange(input.value.length, input.value.length) + }} > e != null && setPassword(String(e))} + onChange={e => { + e != null && setPassword(String(e)) + inputRef?.current?.focus() + }} keyboardRef={keyboardRef} /> From b80da40db5c4682ef2b3f3137605d8ce43fef5d5 Mon Sep 17 00:00:00 2001 From: koji Date: Thu, 9 May 2024 13:04:41 -0400 Subject: [PATCH 3/8] update InputField component --- app/src/atoms/InputField/index.tsx | 252 ------------------ .../organisms/NetworkSettings/SetWifiCred.tsx | 12 +- 2 files changed, 3 insertions(+), 261 deletions(-) diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx index 50327601542..330bb566ba9 100644 --- a/app/src/atoms/InputField/index.tsx +++ b/app/src/atoms/InputField/index.tsx @@ -45,8 +45,6 @@ export interface InputFieldProps { tooltipText?: string /** optional caption. hidden when `error` is given */ caption?: string | null - /** appears to the right of the caption. Used for character limits, eg '0/45' */ - secondaryCaption?: string | null /** optional input type (default "text") */ type?: | typeof INPUT_TYPE_TEXT @@ -296,15 +294,6 @@ export const InputField = React.forwardRef( {props.caption} ) : null} - {props.secondaryCaption != null ? ( - - {props.secondaryCaption} - - ) : null} {hasError ? ( {props.error} @@ -316,247 +305,6 @@ export const InputField = React.forwardRef( } ) -// export function InputField(props: InputFieldProps): JSX.Element { -// return ( -// -// -// -// ) -// } - -// function Input(props: InputFieldProps): JSX.Element { -// const { -// placeholder, -// textAlign = TYPOGRAPHY.textAlignLeft, -// size = 'small', -// title, -// tooltipText, -// tabIndex = 0, -// ref, -// ...inputProps -// } = props -// const hasError = props.error != null -// const value = props.isIndeterminate ?? false ? '' : props.value ?? '' -// const placeHolder = props.isIndeterminate ?? false ? '-' : props.placeholder -// const [targetProps, tooltipProps] = useHoverTooltip() - -// const OUTER_CSS = css` -// @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { -// grid-gap: ${SPACING.spacing8}; -// &:focus-within { -// filter: ${hasError -// ? 'none' -// : `drop-shadow(0px 0px 10px ${COLORS.blue50})`}; -// } -// } -// ` - -// const INPUT_FIELD = css` -// display: flex; -// background-color: ${COLORS.white}; -// border-radius: ${BORDERS.borderRadius4}; -// padding: ${SPACING.spacing8}; -// border: 1px ${BORDERS.styleSolid} ${hasError ? COLORS.red50 : COLORS.grey50}; -// font-size: ${TYPOGRAPHY.fontSizeP}; -// width: 100%; -// height: 2rem; - -// &:active:enabled { -// border: 1px ${BORDERS.styleSolid} ${COLORS.blue50}; -// } - -// & input { -// border-radius: inherit; -// color: ${COLORS.black90}; -// border: none; -// flex: 1 1 auto; -// width: 100%; -// height: ${SPACING.spacing16}; -// text-align: ${textAlign}; -// } -// & input:focus { -// outline: none; -// } - -// &:hover { -// border: 1px ${BORDERS.styleSolid} -// ${hasError ? COLORS.red50 : COLORS.grey60}; -// } - -// &:focus-visible { -// border: 1px ${BORDERS.styleSolid} ${COLORS.grey55}; -// outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50}; -// outline-offset: 2px; -// } - -// &:focus-within { -// border: 1px ${BORDERS.styleSolid} -// ${hasError ? COLORS.red50 : COLORS.blue50}; -// } - -// &:disabled { -// border: 1px ${BORDERS.styleSolid} ${COLORS.grey30}; -// } -// input[type='number']::-webkit-inner-spin-button, -// input[type='number']::-webkit-outer-spin-button { -// -webkit-appearance: none; -// margin: 0; -// } - -// @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { -// height: ${size === 'small' ? '4.25rem' : '5rem'}; -// font-size: ${TYPOGRAPHY.fontSize28}; -// padding: ${SPACING.spacing16} ${SPACING.spacing24}; -// border: 2px ${BORDERS.styleSolid} -// ${hasError ? COLORS.red50 : COLORS.grey50}; - -// &:focus-within { -// box-shadow: none; -// border: ${hasError ? '2px' : '3px'} ${BORDERS.styleSolid} -// ${hasError ? COLORS.red50 : COLORS.blue50}; -// } - -// & input { -// color: ${COLORS.black90}; -// flex: 1 1 auto; -// width: 100%; -// height: 100%; -// font-size: ${TYPOGRAPHY.fontSize28}; -// line-height: ${TYPOGRAPHY.lineHeight36}; -// } -// } -// ` - -// const FORM_BOTTOM_SPACE_STYLE = css` -// padding-top: ${SPACING.spacing4}; -// @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { -// padding: ${SPACING.spacing8} 0rem; -// padding-bottom: 0; -// } -// ` - -// const TITLE_STYLE = css` -// color: ${hasError ? COLORS.red50 : COLORS.black90}; -// padding-bottom: ${SPACING.spacing8}; -// text-align: ${textAlign}; -// @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { -// font-size: ${TYPOGRAPHY.fontSize22}; -// font-weight: ${TYPOGRAPHY.fontWeightRegular}; -// line-height: ${TYPOGRAPHY.lineHeight28}; -// justify-content: ${textAlign}; -// } -// ` - -// const ERROR_TEXT_STYLE = css` -// color: ${COLORS.red50}; -// padding-top: ${SPACING.spacing4}; -// @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { -// font-size: ${TYPOGRAPHY.fontSize22}; -// color: ${COLORS.red50}; -// padding-top: ${SPACING.spacing8}; -// } -// ` - -// const UNITS_STYLE = css` -// color: ${props.disabled ? COLORS.grey40 : COLORS.grey50}; -// font-size: ${TYPOGRAPHY.fontSizeLabel}; -// font-weight: ${TYPOGRAPHY.fontWeightSemiBold}; -// line-height: ${TYPOGRAPHY.lineHeight12}; -// align-text: ${TEXT_ALIGN_RIGHT}; -// @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { -// color: ${props.disabled ? COLORS.grey40 : COLORS.grey50}; -// font-size: ${TYPOGRAPHY.fontSize22}; -// font-weight: ${TYPOGRAPHY.fontWeightRegular}; -// line-height: ${TYPOGRAPHY.lineHeight28}; -// justify-content: ${textAlign}; -// } -// ` - -// return ( -// -// {title != null ? ( -// -// -// {title} -// -// {tooltipText != null ? ( -// <> -// -// -// -// {tooltipText} -// -// ) : null} -// -// ) : null} -// -// { -// if (props.id != null) { -// document.getElementById(props.id)?.focus() -// } -// }} -// > -// event.currentTarget.blur()} // prevent value change with scrolling -// type={props.type} -// ref={ref} -// /> -// {props.units != null ? ( -// {props.units} -// ) : null} -// -// -// {props.caption != null ? ( -// -// {props.caption} -// -// ) : null} -// {props.secondaryCaption != null ? ( -// -// {props.secondaryCaption} -// -// ) : null} -// {hasError ? ( -// -// {props.error} -// -// ) : null} -// -// ) -// } - const StyledInput = styled.input` &::placeholder { color: ${COLORS.grey40}; diff --git a/app/src/organisms/NetworkSettings/SetWifiCred.tsx b/app/src/organisms/NetworkSettings/SetWifiCred.tsx index 485bc28ec8f..0ef6438bc76 100644 --- a/app/src/organisms/NetworkSettings/SetWifiCred.tsx +++ b/app/src/organisms/NetworkSettings/SetWifiCred.tsx @@ -34,15 +34,13 @@ export function SetWifiCred({ const [showPassword, setShowPassword] = React.useState(false) const inputRef = React.useRef(null) const isUnboxingFlowOngoing = useIsUnboxingFlowOngoing() - + const MemoizedInput = React.memo(InputField) const handleBlur = (): void => { if (inputRef.current != null) inputRef.current?.focus() } React.useEffect(() => { - if (inputRef.current != null || password.length > 0) { - console.log('hello') - console.log(inputRef?.current) + if (inputRef.current != null) { inputRef?.current?.focus() } }, [password]) @@ -63,7 +61,7 @@ export function SetWifiCred({ justifyContent={JUSTIFY_SPACE_BETWEEN} > - { setShowPassword(currentState => !currentState) - const input = document.querySelector('input') - console.log('onclick') - console.log(input) inputRef?.current?.focus() - input?.setSelectionRange(input.value.length, input.value.length) }} > Date: Thu, 9 May 2024 13:15:49 -0400 Subject: [PATCH 4/8] fix test error --- app/src/atoms/InputField/__tests__/InputField.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/src/atoms/InputField/__tests__/InputField.test.tsx b/app/src/atoms/InputField/__tests__/InputField.test.tsx index 89f120bf2fe..dba33e8978f 100644 --- a/app/src/atoms/InputField/__tests__/InputField.test.tsx +++ b/app/src/atoms/InputField/__tests__/InputField.test.tsx @@ -14,7 +14,6 @@ describe('HeaterShakerSlideout', () => { props = { type: 'number', caption: 'caption', - secondaryCaption: 'secondary caption', max: 10, min: 1, units: 'rpm', From c7992776f5515b7c98156d721de75900d02f7e1a Mon Sep 17 00:00:00 2001 From: koji Date: Thu, 9 May 2024 16:46:54 -0400 Subject: [PATCH 5/8] fix input field test and password form --- .../InputField/__tests__/InputField.test.tsx | 1 - .../organisms/NetworkSettings/SetWifiCred.tsx | 56 +++++++++---------- 2 files changed, 28 insertions(+), 29 deletions(-) diff --git a/app/src/atoms/InputField/__tests__/InputField.test.tsx b/app/src/atoms/InputField/__tests__/InputField.test.tsx index dba33e8978f..536d973401e 100644 --- a/app/src/atoms/InputField/__tests__/InputField.test.tsx +++ b/app/src/atoms/InputField/__tests__/InputField.test.tsx @@ -29,7 +29,6 @@ describe('HeaterShakerSlideout', () => { it('renders correct information when type is number', () => { render(props) screen.getByText('caption') - screen.getByText('secondary caption') screen.getByText('rpm') }) it('renders correct information when type is text', () => { diff --git a/app/src/organisms/NetworkSettings/SetWifiCred.tsx b/app/src/organisms/NetworkSettings/SetWifiCred.tsx index 0ef6438bc76..f894d5fb630 100644 --- a/app/src/organisms/NetworkSettings/SetWifiCred.tsx +++ b/app/src/organisms/NetworkSettings/SetWifiCred.tsx @@ -7,6 +7,7 @@ import { Btn, DIRECTION_COLUMN, DIRECTION_ROW, + DISPLAY_FLEX, Flex, Icon, JUSTIFY_SPACE_BETWEEN, @@ -53,42 +54,41 @@ export function SetWifiCred({ padding={`0 6.25rem ${SPACING.spacing40}`} marginTop={isUnboxingFlowOngoing ? undefined : '7.75rem'} > - - {t('enter_password')} - - - - - - { - setShowPassword(currentState => !currentState) - inputRef?.current?.focus() - }} + + {t('enter_password')} + - + + + { + setShowPassword(currentState => !currentState) + inputRef?.current?.focus() + }} + display={DISPLAY_FLEX} flexDirection={DIRECTION_ROW} alignItems={ALIGN_CENTER} - gridGap={SPACING.spacing16} + gridGap={SPACING.spacing12} + width="7.375rem" > {showPassword ? t('hide') : t('show')} - - + + From 135cb51ba2c9797589f01d168df2f158fe917049 Mon Sep 17 00:00:00 2001 From: koji Date: Thu, 9 May 2024 17:28:35 -0400 Subject: [PATCH 6/8] fix test error --- app/src/organisms/NetworkSettings/SetWifiCred.tsx | 6 +++++- .../NetworkSettings/__tests__/SetWifiCred.test.tsx | 7 +++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/app/src/organisms/NetworkSettings/SetWifiCred.tsx b/app/src/organisms/NetworkSettings/SetWifiCred.tsx index f894d5fb630..3153fd82a8c 100644 --- a/app/src/organisms/NetworkSettings/SetWifiCred.tsx +++ b/app/src/organisms/NetworkSettings/SetWifiCred.tsx @@ -83,7 +83,11 @@ export function SetWifiCred({ gridGap={SPACING.spacing12} width="7.375rem" > - + {showPassword ? t('hide') : t('show')} diff --git a/app/src/organisms/NetworkSettings/__tests__/SetWifiCred.test.tsx b/app/src/organisms/NetworkSettings/__tests__/SetWifiCred.test.tsx index 0af38eff22d..51444bea730 100644 --- a/app/src/organisms/NetworkSettings/__tests__/SetWifiCred.test.tsx +++ b/app/src/organisms/NetworkSettings/__tests__/SetWifiCred.test.tsx @@ -55,11 +55,14 @@ describe('SetWifiCred', () => { it('should switch the input type and button text when tapping the icon next to the input', () => { render(props) const button = screen.getByRole('button', { name: 'Show' }) - // ToDo: 11/08/2022 kj switch to screen.getByRole once understand the issue on this input const inputBox = screen.getByLabelText('wifi_password') expect(inputBox).toHaveAttribute('type', 'password') fireEvent.click(button) screen.getByRole('button', { name: 'Hide' }) - expect(inputBox).toHaveAttribute('type', 'text') + screen.getByTestId('icon_eye-slash') + expect(screen.getByLabelText('wifi_password')).toHaveAttribute( + 'type', + 'text' + ) }) }) From 1c83a58827842bbbc25080a0fa4daa3afaabca93 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 10 May 2024 00:50:25 -0400 Subject: [PATCH 7/8] update input field styling --- app/src/atoms/InputField/index.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx index 330bb566ba9..20bd950a3ae 100644 --- a/app/src/atoms/InputField/index.tsx +++ b/app/src/atoms/InputField/index.tsx @@ -73,7 +73,7 @@ export interface InputFieldProps { | typeof TYPOGRAPHY.textAlignCenter /** small or medium input field height, relevant only */ size?: 'medium' | 'small' - /** react useRef for controlling focus on ODD */ + /** react useRef to control input field instead of react event */ ref?: React.MutableRefObject } @@ -175,8 +175,17 @@ export const InputField = React.forwardRef( flex: 1 1 auto; width: 100%; height: 100%; - font-size: ${TYPOGRAPHY.fontSize28}; - line-height: ${TYPOGRAPHY.lineHeight36}; + font-size: ${size === 'small' + ? TYPOGRAPHY.fontSize28 + : TYPOGRAPHY.fontSize38}; + line-height: ${size === 'small' + ? TYPOGRAPHY.lineHeight36 + : TYPOGRAPHY.lineHeight48}; + } + + /* the size of dot for password is handled by font-size */ + input[type='password'] { + font-size: ${size === 'small' ? '71px' : '77px'}; } } ` From 95374afa41dda7b548632d80fec9988a943f6eef Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 10 May 2024 00:59:47 -0400 Subject: [PATCH 8/8] update font size styling --- app/src/atoms/InputField/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx index aa59d6f8b63..5471c322d96 100644 --- a/app/src/atoms/InputField/index.tsx +++ b/app/src/atoms/InputField/index.tsx @@ -159,7 +159,9 @@ export const InputField = React.forwardRef( @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { height: ${size === 'small' ? '4.25rem' : '5rem'}; - font-size: ${TYPOGRAPHY.fontSize28}; + font-size: ${size === 'small' + ? TYPOGRAPHY.fontSize28 + : TYPOGRAPHY.fontSize38}; padding: ${SPACING.spacing16} ${SPACING.spacing24}; border: 2px ${BORDERS.styleSolid} ${hasError ? COLORS.red50 : COLORS.grey50};