feat(SelectCountry): use autocomplete instead of dropdown #3023

tujoworker · 2023-12-07T20:03:53Z

With that change we support browser auto-fill and much quicker UX search ability. Also, users can search in both/all locales at the same time.

Fixes #2993

vercel · 2023-12-07T20:03:58Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eufemia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 8, 2023 0:29am

codesandbox-ci · 2023-12-07T20:11:11Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit eef5224:

Sandbox	Source
eufemia-starter	Configuration

With that change we support browser auto-fill and much quicker search ability. Also, users can search in all locales.

joakbjerk

Looks good! 🫶

...gn-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/properties.mdx

langz · 2023-12-08T09:53:11Z

Done some quick testing at https://eufemia-git-feat-select-country-autocomplete-eufemia.vercel.app/uilib/extensions/forms/feature-fields/SelectCountry/demos/ :

Could the "autocomplete/dropdown list" match the width of the "input field"?

Screen.Recording.2023-12-08.at.10.52.18.mov

langz · 2023-12-08T09:55:27Z

Done some quick testing at https://eufemia-git-feat-select-country-autocomplete-eufemia.vercel.app/uilib/extensions/forms/feature-fields/SelectCountry/demos/ :

Seems like the search functionality doesn't work as expected, when searching for "ch" I get a lot of results that I don't understand why I get.

Screen.Recording.2023-12-08.at.10.54.09.mov

langz · 2023-12-08T09:58:03Z

Done some quick testing at https://eufemia-git-feat-select-country-autocomplete-eufemia.vercel.app/uilib/extensions/forms/feature-fields/SelectCountry/demos/ :

Should the search result be updated when removing characters from an existing search or selected country?

In this video you can see that "sa" as a search gives result initially, but after selecting "saudi-arabia" and when removing characters from "saudi-arabia" so that it gets to "sa", it does not give the same results.

Screen.Recording.2023-12-08.at.10.56.54.mov

tujoworker · 2023-12-08T10:14:11Z

Nice findings! Regarding the ch is because we add the English names too. But I think we should then remove it, and use a different approach regarding the autofill feature 👍

And regarding "saudi-arabia" – it should still filter as before. You may press enter or down arrow to open it again.

langz · 2023-12-08T10:52:43Z

Nice findings! Regarding the ch is because we add the English names too. But I think we should then remove it, and use a different approach regarding the autofill feature 👍

And regarding "saudi-arabia" – it should still filter as before. You may press enter or down arrow to open it again.

In regards to the 'ch'-issue, could we only search in the locale used?
So when searching for "ch" in norwegian locale, we would not get "china" as a result?

tujoworker · 2023-12-08T11:31:13Z

yes. The latest commit does ensure that 👍

langz · 2023-12-08T11:33:49Z

yes. The latest commit does ensure that 👍

Great 👏
I'll try to test it once more then, when the preview is rebuilt 🏎️

langz · 2023-12-08T13:37:44Z

Is this a potential issue, do we need to handle if the value is a the ISO code of a country that's not in the given countries value? Or maybe I've just created a strange case that we don't have to handle or provide support for?

Like this:

  <Field.SelectCountry
      countries="Nordic"
      value="AL" //Albania(not in the Nordics)
      onChange={(value) => console.log('onChange', value)}
/>

CSB

langz · 2023-12-08T13:40:21Z

I'm not sure if this is a problem or not, just an observation, but I feel like it takes quite long time to open the autocomplete, could be because of the number of countries(since there's so many) and because of that there's no way around the "delay", or perhaps it's related to something else, not sure. Just wanted to report:

Screen.Recording.2023-12-08.at.14.39.00.mov

But compared to the "old selectcountry" vs. "the new selectcountry" it's noticable.

Or perhaps ignore this, now when I retested I did not feel like the difference was too big, but in my initial test, it somehow took quite longer to open 🤔

langz · 2023-12-08T13:55:16Z

The description says that it "Fixes #2993", is that correct, or perhaps this is "just the start of fixing #2993"?.

As far as I understand, the component still only returns the ISO value of the selected country, and does not have the possibility yet to return more/different properties/keys/values, like "country name", etc. Which was how I interpreted the issue #2993

Like in PR #3023 and since they share so many things, we move the shared code into the SelectCountry component. --------- Co-authored-by: Anders <[email protected]>

## [10.15.0](v10.14.0...v10.15.0) (2023-12-12) ### 📝 Documentation * **Card:** adds horizontal fields example ([#2907](#2907)) ([661db7a](661db7a)) * **FAQ:** change version of yarn to v4 ([#2944](#2944)) ([5151fd9](5151fd9)) * **FAQ:** removes stylelint as dependency issue ([#2943](#2943)) ([64ffd13](64ffd13)) * **Field.SelectCountry:** select component -> selection component ([#3003](#3003)) ([b098c6b](b098c6b)) * **FormLabel:** document disabled property ([#3004](#3004)) ([d276bf6](d276bf6)) * **Layout:** fix import of ux-layout-spacing.png ([#2921](#2921)) ([910bcb4](910bcb4)) * **Number:** add info about when to use and not to use ([#2955](#2955)) ([55b3447](55b3447)) * **SelectCountry:** replace bar as value in examples ([#2990](#2990)) ([8fd9f0e](8fd9f0e)) ### 🐛 Bug Fixes * **Autocomplete:** enhance reactivity by value change from outside ([#2922](#2922)) ([e4fd9f9](e4fd9f9)) * **Card:** add support for small screen sizes ([#3051](#3051)) ([62daa1a](62daa1a)) * **DatePicker:** renders mask_placeholder from locale w/o provider ([#2947](#2947)) ([b522bd7](b522bd7)) * **Dropdown:** error message when passing a function to innerRef ([#2932](#2932)) ([c362a4a](c362a4a)) * **Expiry:** correct class placement and CSS specificity issue ([#2915](#2915)) ([ae1154d](ae1154d)), closes [#2914](#2914) * **FieldBlock:** fix support for stretch alignment ([#2913](#2913)) ([2fdbd4b](2fdbd4b)), closes [#2907](#2907) * **FormLabel:** don't apply margin-right when no content was given ([#2927](#2927)) ([057f957](057f957)) * **forms:** Fix bug on replacing error message values ([#2971](#2971)) ([b24ddb5](b24ddb5)) * **forms:** Fix data context provider path and error state handling ([#2926](#2926)) ([01a01f4](01a01f4)) * **GlobalStatus:** remove z-index to enhance flexibility ([#2952](#2952)) ([13a9d6e](13a9d6e)), closes [/github.com/dnbexperience/eufemia/commit/1fb638b12df290533e6a89e7f8135a7e23c0797e#diff-4d582f82c1661d8de20042e6e65250a4d2710c2b31f8955fcd6eda14097a0b4](https://github.com/dnbexperience//github.com/dnbexperience/eufemia/commit/1fb638b12df290533e6a89e7f8135a7e23c0797e/issues/diff-4d582f82c1661d8de20042e6e65250a4d2710c2b31f8955fcd6eda14097a0b4) * **Hr:** remove overflow causing a scrollbar ([#2945](#2945)) ([dc989ff](dc989ff)) * **PhoneNumber:** ensure correct alignment on smaller screens ([#2957](#2957)) ([ae9913b](ae9913b)) * **PhoneNumber:** return country code only when a number is given ([#2920](#2920)) ([5b1a9b0](5b1a9b0)), closes [#2922](#2922) [#2923](#2923) * **RadioGroup:** omit rendering label when not given ([#2928](#2928)) ([693f9d4](693f9d4)) * **Selection:** correctly link id with label ([#2911](#2911)) ([71ad30d](71ad30d)), closes [#2842](#2842) * **ToggleButtonGroup:** omit rendering label when not given ([#2929](#2929)) ([26f683e](26f683e)) ### ✨ Features * **Accordion:** new filled variant + style refactoring ([#2896](#2896)) ([a4c1fb0](a4c1fb0)) * add support for functional refs to various form components ([#2946](#2946)) ([cecad75](cecad75)) * **Breadcrumb:** correct gap between items and fix overlapping focus ring ([#2917](#2917)) ([6252458](6252458)) * **Button, Anchor:** fix launch icon for _blank button links ([#2930](#2930)) ([37a65dc](37a65dc)) * **Checkbox:** Sbanken styling ([#2904](#2904)) ([b2dbd44](b2dbd44)), closes [#2888](#2888) * **Currency:** add automatic locale and alignment support ([#2956](#2956)) ([3c64d4d](3c64d4d)) * **forms:** include styles by default ([#2918](#2918)) ([e2f4c1e](e2f4c1e)) * **MultiInputMask:** Add stretch property ([#2914](#2914)) ([706beb3](706beb3)) * **PaymentCard:** adds card_status unknown ([#2934](#2934)) ([a36ffa7](a36ffa7)) * **PhoneNumber:** add `pattern` property ([#2962](#2962)) ([86cb6e0](86cb6e0)) * **PhoneNumber:** add filter for showing e.g. only Scandinavia countries ([#2959](#2959)) ([995c43d](995c43d)) * **PhoneNumber:** add prioritized sort option ([#3034](#3034)) ([5fe0e41](5fe0e41)), closes [#3023](#3023) * **PhoneNumber:** add property `omitCountryCodeField` ([#2961](#2961)) ([4a3c7e2](4a3c7e2)) * **PhoneNumber:** remove structure and format when number is not +47 ([#2958](#2958)) ([56e2f08](56e2f08)) * **Section:** add dropShadow support ([#3053](#3053)) ([040a92b](040a92b)) * **SelectCountry:** use autocomplete instead of dropdown ([#3023](#3023)) ([0f2990c](0f2990c)), closes [#2993](#2993) * **Switch:** Sbanken styling ([#2939](#2939)) ([46c5506](46c5506)) * **ToggleButton:** Sbanken styling ([#2936](#2936)) ([5370376](5370376)), closes [#2931](#2931) [#2904](#2904) [#2888](#2888) * Updated Sbanken theming + improved screenshot test coverage for Radio+Checkbox ([#2931](#2931)) ([e42c81e](e42c81e))

tujoworker · 2023-12-12T11:50:41Z

🎉 This PR is included in version 10.15.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

vercel bot deployed to Preview December 7, 2023 20:09 View deployment

chore(SelectCountry): use autocomplete instead of dropdown

b74021d

With that change we support browser auto-fill and much quicker search ability. Also, users can search in all locales.

tujoworker force-pushed the feat/select-country-autocomplete branch from 54da540 to b74021d Compare December 7, 2023 21:12

vercel bot deployed to Preview December 7, 2023 21:18 View deployment

tujoworker requested a review from langz December 8, 2023 07:45

joakbjerk approved these changes Dec 8, 2023

View reviewed changes

...gn-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry/properties.mdx Outdated Show resolved Hide resolved

Rename NorthernNordic to Nordic and remove AutonomousNordic

67dcb24

vercel bot deployed to Preview December 8, 2023 09:10 View deployment

tujoworker force-pushed the feat/select-country-autocomplete branch from 51a8620 to 03d69b2 Compare December 8, 2023 11:32

vercel bot deployed to Preview December 8, 2023 11:42 View deployment

Add independent locale autofill support and remove independent width

eef5224

tujoworker force-pushed the feat/select-country-autocomplete branch from 03d69b2 to eef5224 Compare December 8, 2023 12:22

vercel bot deployed to Preview December 8, 2023 12:29 View deployment

tujoworker merged commit 0f2990c into main Dec 8, 2023
10 checks passed

tujoworker deleted the feat/select-country-autocomplete branch December 8, 2023 13:54

tujoworker mentioned this pull request Dec 8, 2023

feat(PhoneNumber): add prioritized sort option #3034

Merged

langz mentioned this pull request Dec 11, 2023

bug(Field.PhoneNumber): searching in country code field with locale nb-NO, gives hits when searching with english country names #3052

Closed

tujoworker added the released label Dec 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(SelectCountry): use autocomplete instead of dropdown #3023

feat(SelectCountry): use autocomplete instead of dropdown #3023

tujoworker commented Dec 7, 2023 •

edited

Loading

vercel bot commented Dec 7, 2023 •

edited

Loading

codesandbox-ci bot commented Dec 7, 2023 •

edited

Loading

joakbjerk left a comment

langz commented Dec 8, 2023

langz commented Dec 8, 2023

langz commented Dec 8, 2023

tujoworker commented Dec 8, 2023 •

edited

Loading

langz commented Dec 8, 2023

tujoworker commented Dec 8, 2023

langz commented Dec 8, 2023 •

edited

Loading

langz commented Dec 8, 2023

langz commented Dec 8, 2023 •

edited

Loading

langz commented Dec 8, 2023 •

edited

Loading

tujoworker commented Dec 12, 2023

feat(SelectCountry): use autocomplete instead of dropdown #3023

feat(SelectCountry): use autocomplete instead of dropdown #3023

Conversation

tujoworker commented Dec 7, 2023 • edited Loading

vercel bot commented Dec 7, 2023 • edited Loading

codesandbox-ci bot commented Dec 7, 2023 • edited Loading

joakbjerk left a comment

Choose a reason for hiding this comment

langz commented Dec 8, 2023

langz commented Dec 8, 2023

langz commented Dec 8, 2023

tujoworker commented Dec 8, 2023 • edited Loading

langz commented Dec 8, 2023

tujoworker commented Dec 8, 2023

langz commented Dec 8, 2023 • edited Loading

langz commented Dec 8, 2023

langz commented Dec 8, 2023 • edited Loading

langz commented Dec 8, 2023 • edited Loading

tujoworker commented Dec 12, 2023

tujoworker commented Dec 7, 2023 •

edited

Loading

vercel bot commented Dec 7, 2023 •

edited

Loading

codesandbox-ci bot commented Dec 7, 2023 •

edited

Loading

tujoworker commented Dec 8, 2023 •

edited

Loading

langz commented Dec 8, 2023 •

edited

Loading

langz commented Dec 8, 2023 •

edited

Loading

langz commented Dec 8, 2023 •

edited

Loading