feat(forms): add autocomplete (autofill) support #2811

tujoworker · 2023-10-30T10:13:20Z

This allows us to use:

<Form.Hander>
  <Field.String autoComplete="first-name" path="/your-pointer" />
  <Field.String autoComplete="last-name" path="/your-pointer" />
</Form.Hander>

or

<Form.Hander autoComplete={true}>
  <Field.String path="/firstName" />
  <Field.String path="/lastName" />
</Form.Hander>

vercel · 2023-10-30T10:13:25Z

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	Oct 31, 2023 9:00am

codesandbox-ci · 2023-10-30T10:19:32Z

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 c6a331b:

Sandbox	Source
eufemia-starter	Configuration

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/info.mdx

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/best-practices-on-forms.mdx

...design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Handler/info.mdx

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/best-practices-on-forms.mdx

langz

Could/should we have an example of this somewhere in the docs, so that it could be possible to see/test? Maybe it's not needed 🤔

packages/dnb-eufemia/src/extensions/forms/types.ts

Co-authored-by: Anders <[email protected]>

tujoworker · 2023-10-31T19:50:16Z

@langz Good idea! Have added an example here.

## [10.11.0](v10.10.0...v10.11.0) (2023-11-03) ### ✨ Features * **breakpoints:** media query mixin offset options ([#2773](#2773)) ([d0c4c6d](d0c4c6d)) * **Dropdown:** add Drawerlist theme for Sbanken ([#2649](#2649)) ([3a69d7c](3a69d7c)) * **FormLabel:** rewrite to TypeScript ([#2818](#2818)) ([2b3e419](2b3e419)) * **forms:** add autocomplete (autofill) support ([#2811](#2811)) ([342556c](342556c)) * **forms:** add Norwegian translation to country list ([#2814](#2814)) ([6073ab7](6073ab7)) * **forms:** reset `sessionStorageId` on submit ([#2812](#2812)) ([cbbd9e5](cbbd9e5)) * **PaymentCard:** add styling for other card statuses ([#2777](#2777)) ([#2822](#2822)) ([195b083](195b083)) * **SASS:** add allBetween media query breakpoint mixin ([#2779](#2779)) ([1c8e8ef](1c8e8ef)) * **Section:** add responsive props: breakout, outline, cornerRadius, backgroundColor, textColor and innerSpace ([#2791](#2791)) ([ed3ca99](ed3ca99)) * **skip-link:** sbanken styling ([#2785](#2785)) ([f6d9ea3](f6d9ea3)) * **Space:** add innerSpace prop with media query breakpoints support ([#2790](#2790)) ([3dffb90](3dffb90)) * **Upload:** singular texts when uploading single file ([#2783](#2783)) ([cbf1cb9](cbf1cb9)) ### 🐛 Bug Fixes * **Anchor:** position icon left with target blank sbanken ([#2797](#2797)) ([d2d1779](d2d1779)) * BreadcrumbItem when using to and element props ([#2813](#2813)) ([e7eff2d](e7eff2d)) * **Breadcrumb:** Pass rest props to item when not interactive ([#2798](#2798)) ([72de227](72de227)), closes [/github.com//pull/2676/files#r1368576095](https://github.com/dnbexperience//github.com/dnbexperience/eufemia/pull/2676/files/issues/r1368576095) * **FieldBlock:** add asFieldset property to force use fieldset/legend ([#2780](#2780)) ([bd1faed](bd1faed)) * **FieldBlock:** fix alignment issue when element is fieldset ([#2786](#2786)) ([544424b](544424b)) * **forms:** enhance accessibility by using toggle buttons ([#2781](#2781)) ([aee0113](aee0113)) * **forms:** fix Form.Element type ([#2796](#2796)) ([0b5dfa7](0b5dfa7)) * **forms:** Selection accessibility enhancement by using toggle buttons ([#2795](#2795)) ([6bc6062](6bc6062)) * **forms:** Support undefined in toggle and button fields ([#2775](#2775)) ([a22fad5](a22fad5)) * **GlobalStatus:** remove paragraph tag around title to allow children paragraphs ([#2800](#2800)) ([c0657bb](c0657bb)) * **NumberFormat:** show em dash instead of NaN ([#2784](#2784)) ([ca65f4a](ca65f4a)) * **NumberMask:** as_number should default to locally given decimalSymbol ([#2810](#2810)) ([833f422](833f422)) * **PhoneNumber:** fix spacing prop support ([#2815](#2815)) ([c57e7d1](c57e7d1)), closes [#2807](#2807) * **TypeScript:** fix Grid and Flex export ([#2819](#2819)) ([5316fc0](5316fc0)) * **TypeScript:** make dynamic element prop compatible with e.g. Styled Component elements ([#2778](#2778)) ([8a6b766](8a6b766)) * **useMedia:** enhance SSR support by setting state during component mount ([#2774](#2774)) ([d72aa2b](d72aa2b)) ### 📝 Documentation * display anchors with icons using Anchor's icon prop ([#2801](#2801)) ([57e75ac](57e75ac)) * **FieldBlock:** removes excessive properties header ([e5d9cbe](e5d9cbe)) * **FieldBlock:** removes excessive properties header ([#2788](#2788)) ([bb739ea](bb739ea)) * **FormSet:** spelling in deprecation docs ([#2827](#2827)) ([1bcbf60](1bcbf60)) * **PaymentCard:** sets card_number as required ([#2841](#2841)) ([b58978e](b58978e))

tujoworker · 2023-11-03T07:18:43Z

🎉 This PR is included in version 10.11.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

vercel bot deployed to Preview October 30, 2023 10:19 View deployment

tujoworker requested review from langz and henit October 30, 2023 10:27

tujoworker marked this pull request as ready for review October 30, 2023 10:27

tujoworker force-pushed the feat/forms-autocomplete-autofill branch from 3245337 to d46f41a Compare October 30, 2023 10:36

vercel bot deployed to Preview October 30, 2023 10:54 View deployment

langz approved these changes Oct 30, 2023

View reviewed changes

tujoworker force-pushed the feat/forms-autocomplete-autofill branch from bd56eec to 92ed58f Compare October 30, 2023 20:58

Update snapshots

2f50658

vercel bot deployed to Preview October 30, 2023 21:16 View deployment

henit approved these changes Oct 31, 2023

View reviewed changes

packages/dnb-eufemia/src/extensions/forms/types.ts Outdated Show resolved Hide resolved

tujoworker force-pushed the feat/forms-autocomplete-autofill branch from 94360b6 to d702ea5 Compare October 31, 2023 08:48

tujoworker and others added 2 commits October 31, 2023 09:51

feat(forms): add autocomplete (autofill) support

42589b3

Co-authored-by: Anders <[email protected]>

Add autofill demo to Form.Handler

c6a331b

tujoworker force-pushed the feat/forms-autocomplete-autofill branch from d702ea5 to c6a331b Compare October 31, 2023 08:52

vercel bot deployed to Preview October 31, 2023 09:00 View deployment

tujoworker merged commit 342556c into main Oct 31, 2023
7 checks passed

tujoworker deleted the feat/forms-autocomplete-autofill branch October 31, 2023 19:50

tujoworker added the released label Nov 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(forms): add autocomplete (autofill) support #2811

feat(forms): add autocomplete (autofill) support #2811

tujoworker commented Oct 30, 2023 •

edited

Loading

vercel bot commented Oct 30, 2023 •

edited

Loading

codesandbox-ci bot commented Oct 30, 2023 •

edited

Loading

langz left a comment

tujoworker commented Oct 31, 2023

tujoworker commented Nov 3, 2023

feat(forms): add autocomplete (autofill) support #2811

feat(forms): add autocomplete (autofill) support #2811

Conversation

tujoworker commented Oct 30, 2023 • edited Loading

vercel bot commented Oct 30, 2023 • edited Loading

codesandbox-ci bot commented Oct 30, 2023 • edited Loading

langz left a comment

Choose a reason for hiding this comment

tujoworker commented Oct 31, 2023

tujoworker commented Nov 3, 2023

tujoworker commented Oct 30, 2023 •

edited

Loading

vercel bot commented Oct 30, 2023 •

edited

Loading

codesandbox-ci bot commented Oct 30, 2023 •

edited

Loading