From ad75edf4a4a7383c258396131e40fab9f8212818 Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Thu, 6 Jul 2023 16:53:34 -0400 Subject: [PATCH 1/9] refactor(location-field): Compute control classname into variable. --- packages/location-field/src/index.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/location-field/src/index.tsx b/packages/location-field/src/index.tsx index 8753592ff..7dc383bfe 100644 --- a/packages/location-field/src/index.tsx +++ b/packages/location-field/src/index.tsx @@ -195,7 +195,9 @@ const LocationField = ({ return location && !hideExistingValue ? label : ""; }; - const listBoxId = `listbox-${optionKey}`; + const formControlClassname = `${locationType}-form-control`; + + const listBoxId = `${locationType}-listbox`; const intl = useIntl(); @@ -346,10 +348,6 @@ const LocationField = ({ }); }); - const getFormControlClassname = () => { - return `${locationType}-form-control`; - }; - const setLocation = (newLocation: Location, resultType: ResultType) => { onLocationSelected({ location: newLocation, @@ -888,7 +886,7 @@ const LocationField = ({ aria-label={defaultPlaceholder} aria-required={isRequired} autoFocus={autoFocus} - className={getFormControlClassname()} + className={formControlClassname} onChange={onTextInputChange} onClick={handleTextInputClick} onKeyDown={onKeyDown} From c769229614ae8b6a0d637a55d02502d7f003c12d Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Thu, 6 Jul 2023 17:24:11 -0400 Subject: [PATCH 2/9] fix(location-field): Always render dropdown list (a11y req). --- __snapshots__/storybook.test.ts.snap | 487 +++++++++++++++++++++++--- packages/location-field/src/index.tsx | 61 ++-- 2 files changed, 467 insertions(+), 81 deletions(-) diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap index 7aedd5db5..75a2850e6 100644 --- a/__snapshots__/storybook.test.ts.snap +++ b/__snapshots__/storybook.test.ts.snap @@ -182331,6 +182331,25 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr width: 30px; } +.c7 { + background-clip: padding-box; + background-color: #fff; + border-radius: 4px; + border: 1px solid rgba(0,0,0,0.15); + box-shadow: 0 6px 12px rgba(0,0,0,0.175); + float: left; + font-size: 14px; + left: 0; + list-style: none; + margin: 2px 0 0; + min-width: 160px; + padding: 5px 0; + position: absolute; + text-align: left; + top: 100%; + z-index: 1000000; +} + .c5 { border: none; box-shadow: none; @@ -182362,6 +182381,7 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr role="group" >