Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(Field.PostalCodeAndCity): clicking city label does not activate/focus the city field when postal code has error #2979

Closed
langz opened this issue Dec 6, 2023 · 4 comments · Fixed by #3190
Closed

bug(Field.PostalCodeAndCity): clicking city label does not activate/focus the city field when postal code has error #2979

langz opened this issue Dec 6, 2023 · 4 comments · Fixed by #3190
Assignees
@snorrekim
Labels
bug Something isn't working released
Milestone
Forms Release

Comments

@langz
Copy link
Contributor

langz commented Dec 6, 2023 •
edited
Loading

🐛 Bug Report

Clicking Field.PostalCodeAndCity's city label does not activate/focus the city field when postal code has error.

To Reproduce

This CSB is using main branch as of today, 06.12.2023.
https://codesandbox.io/p/sandbox/eufemia-starter-forked-s9mzy2?file=%2Fsrc%2FApp.tsx

Steps:

  • Type "1" in the postal code field.
  • Click the label of the city field(the city field is not active/focused, and you have to click twice to make it happen)

Video:

Screen.Recording.2023-12-06.at.12.12.57.mov

Expected behaviour

I would expect the city field to be active/focused when clicking its label.
@langz langz added this to the Forms Release milestone Dec 6, 2023
@langz langz changed the title Clicking Field.PostalCodeAndCity's city label does not activate/focus the city field when postal code has error bug(Field.PostalCodeAndCity): clicking city label does not activate/focus the city field when postal code has error Dec 6, 2023
@langz langz added the bug Something isn't working label Dec 6, 2023
@langz
Copy link
Contributor Author

langz commented Dec 10, 2023

I also experience the same when entering a "correct value" in the postal code field.
https://codesandbox.io/p/sandbox/eufemia-starter-forked-s9mzy2?file=%2Fsrc%2FApp.tsx

Steps:

  • Type "0884" in the postal code field.
  • Click the label of the city field(the city field is not active/focused, and you have to click twice to make it happen)
Screen.Recording.2023-12-10.at.19.00.07.mov

@langz langz modified the milestones: Forms Issue, Forms Release Dec 20, 2023
@snorrekim
Copy link
Contributor

This seems to be an issue with all <StringComponent> and ` fields (so also email, currency, etc.). After making an edit you can't click on it's own label, or on the label of another String or Number field next to it if they are part of the same Field widget (like phone number).

But there's a lot of inconsistency in the behaviour, but it's consistent for String and Number vs their own label, so if that is fixe, we likely fix the others.

@snorrekim snorrekim self-assigned this Jan 8, 2024
@snorrekim
Copy link
Contributor

So this isn't really about error, or Field.PostalCodeAndCity, but about StringComponent and NumberComponent. Should we change the name of the issue?

@snorrekim snorrekim mentioned this issue Jan 8, 2024
Merged
snorrekim added a commit that referenced this issue Jan 9, 2024
@snorrekim @tujoworker
fix(FieldBlock): label can be clicked after focusing input (#3190)
95b37e7 
Fixes #2979

The label was an internal component and was re-initialized on each re-render of FieldBlock. Fixed by removing the internal component and instead just generating the props.

---------

Co-authored-by: Tobias Høegh <[email protected]>
tujoworker added a commit that referenced this issue Jan 9, 2024
@snorrekim @tujoworker
fix(FieldBlock): label can be clicked after focusing input (#3190)
a759d8f 
Fixes #2979

The label was an internal component and was re-initialized on each re-render of FieldBlock. Fixed by removing the internal component and instead just generating the props.

---------

Co-authored-by: Tobias Høegh <[email protected]>
tujoworker pushed a commit that referenced this issue Jan 11, 2024
@semantic-release-bot
chore(release): 10.17.0 [skip ci]
a365f9a 
## [10.17.0](v10.16.0...v10.17.0) (2024-01-11)

### 📝 Documentation

* refactor custom field component docs and example ([#3193](#3193)) ([3871079](3871079))

### ✨ Features

* **Anchor:** blank target icon styling  ([#3172](#3172)) ([2ca216a](2ca216a))
* **DatePicker:** add onFocus event ([#3188](#3188)) ([2062213](2062213))
* **Field.Number:** add step control functionality ([#3140](#3140)) ([a9e1697](a9e1697))
* **Form.Visibility:** add `pathValue` and `whenValue` ([#3206](#3206)) ([8a547ae](8a547ae))

### 🐛 Bug Fixes

* **Autocomplete:** only set aria-controls attribute when expanded ([#3180](#3180)) ([a16a7ba](a16a7ba))
* **DatePicker:** add return object for onBlur ([#3178](#3178)) ([18b3889](18b3889))
* **DatePicker:** fix bug where minDate set to today is disabled ([#3176](#3176)) ([ef65676](ef65676))
* **Dropdown:** correct aria-controls target element ([#3181](#3181)) ([bc26101](bc26101))
* **Field.Currency:** handle big numbers ([#3184](#3184)) ([b856a46](b856a46)), closes [#3124](#3124) [#3185](#3185)
* **Field.Number:** replace `rightAligned` prop with `align` ([#3175](#3175)) ([ba130ba](ba130ba))
* **FieldBlock:** ensure extra spacing of labels when on small screens ([#3187](#3187)) ([c86c857](c86c857)), closes [#3102](#3102)
* **FieldBlock:** label can be clicked after focusing input ([#3190](#3190)) ([95b37e7](95b37e7)), closes [#2979](#2979)
* **Flex.Container:** add `Flex.withChildren` HOC for handling wrapped children with spacing ([#3200](#3200)) ([93df77c](93df77c))
* **Flex.Container:** show line divider even when heading is present ([#3198](#3198)) ([d135b47](d135b47))
* **Form.Visibility:** move Visibility to Form.Visibility ([#3205](#3205)) ([d3b766f](d3b766f))
* **InputMasked:** correct cursor position when navigating using keyboard ([#3160](#3160)) ([9143b38](9143b38))
* **InputMasked:** extend reliability on cursor position correction ([#3194](#3194)) ([cbc27ac](cbc27ac)), closes [#3160](#3160)
* **MultiInputMask:** enhance handling of right, left and backspace key usage ([#3192](#3192)) ([f3ce934](f3ce934))
* **PhoneNumber:** show read outline on both fields in error state ([#3196](#3196)) ([16ed821](16ed821))
* **Textarea:** ensure correct height based on rows for Firefox browser ([#3207](#3207)) ([75f754e](75f754e))
* **Visibility:** add support for being used in Flex.Container ([#3203](#3203)) ([7a72fa6](7a72fa6))
@tujoworker
Copy link
Member

🎉 This issue has been resolved in version 10.17.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@snorrekim snorrekim

Labels
bug Something isn't working released
Milestone
Forms Release
Development

Successfully merging a pull request may close this issue.

fix(FieldBlock): label can be clicked after focusing input dnbexperience/eufemia
3 participants
@langz @tujoworker @snorrekim