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.

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

fix(forms): change Wizard default scroll behaviour to be active #3481

Merged
merged 4 commits into from
Apr 23, 2024

Conversation

tujoworker
Copy link
Member

No description provided.

@tujoworker tujoworker requested a review from joakbjerk April 22, 2024 14:00
Copy link

vercel bot commented Apr 22, 2024

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 Apr 23, 2024 1:34pm

Copy link

codesandbox-ci bot commented Apr 22, 2024

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.

Copy link
Contributor

@joakbjerk joakbjerk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, the code looks correct, but the omitScrollManagementdoes not seem to work when testing it in the preview portal, I still get scrolled to the top when the step changes.

And also clicking the related code-editor-block also takes me to the top when omitScrollManagement is falsy 😄

Screen.Recording.2024-04-23.at.07.42.32.mov

@joakbjerk
Copy link
Contributor

joakbjerk commented Apr 23, 2024

So after doing some testing locally in storybook, it seems like the the omitScrollManagement is ignored when navigating to the Summary Step in the PizzaDemo atleast🤔 But not working at all in the preview portal for some reason.

Tested the Wizard stories now, and the work perfectly as intended 😄 So its just the PizzaDemo and preview portal that has some oddities.

@tujoworker tujoworker changed the title fix(forms): change the default scroll behaviour to be active fix(forms): change Wizard default scroll behaviour to be active Apr 23, 2024
@tujoworker
Copy link
Member Author

Thanks for testing it out. We missed preventScroll: true in the focus. The focus handling made it to scroll.

Can you test it again? 🙏

@joakbjerk
Copy link
Contributor

Thanks for testing it out. We missed preventScroll: true in the focus. The focus handling made it to scroll.

Can you test it again? 🙏

Works much better now!

…mal and it makes the usage of the CodeBlock so much worse, as it resets the code on focus/blur.
@tujoworker tujoworker merged commit f7b11cc into main Apr 23, 2024
10 checks passed
@tujoworker tujoworker deleted the fix/wizard-scroll branch April 23, 2024 13:52
tujoworker pushed a commit that referenced this pull request Apr 26, 2024
## [10.27.0](v10.26.0...v10.27.0) (2024-04-26)

### 🐛 Bug Fixes

* **Card:** ensure 100% width does only apply when ScrollView is used ([#3450](#3450)) ([6dac9c6](6dac9c6))
* **Card:** use basis inner-space for small screens when `responsive=false` is set ([#3455](#3455)) ([9a2baea](9a2baea))
* **FormLabel:** remove undeclared `FormLabelText` type ([#3449](#3449)) ([3e4782b](3e4782b))
* **forms:** change Wizard default scroll behaviour to be active ([#3481](#3481)) ([f7b11cc](f7b11cc))
* **forms:** ensure proper `Iterate` data context and `filterData` support ([#3463](#3463)) ([d015bc8](d015bc8))
* **forms:** set focus on Wizard step change ([#3475](#3475)) ([265dade](265dade))
* **GlobalStatus:** Symmetric horizontal padding on smaller screens (Sbanken) ([#3454](#3454)) ([59576b2](59576b2))
* **Input:** hide placeholder by default on input focus (Sbanken) ([#3461](#3461)) ([5328210](5328210))
* **MultiInputMask:** prevent focus and blur from firing when navigating between inputs ([#3480](#3480)) ([bec1ffd](bec1ffd))
* **NumberFormat:** ensure support for screen reader "speak text under mouse" mode ([#3438](#3438)) ([93fbd1d](93fbd1d))
* **OrganizationNumber:** add missing full stop for `en-US` error messages ([#3465](#3465)) ([fd1cf10](fd1cf10))
* **Radio.Group:** replace margin spacing with Flex gap ([#3468](#3468)) ([33257b2](33257b2))
* **Selection:** filter out empty options from dropdown variant ([#3444](#3444)) ([60ac548](60ac548))

### 📝 Documentation

* **Checkbox:** update to typed docs ([#3439](#3439)) ([c849439](c849439))
* document all colors ([#3441](#3441)) ([03d7580](03d7580))
* **forms:** improve structure ([#3488](#3488)) ([a240239](a240239))
* **Portal:** properties table with colors and default value (progressive enhancement) ([#3471](#3471)) ([4f1c16c](4f1c16c))

### ✨ Features

* **Flex.Stack:** change default vertical spacing (gap) from small to medium (effects Card with stack as well) ([#3483](#3483)) ([7bf380f](7bf380f))
* **FormLabel:** add support for nested instances ([#3466](#3466)) ([f0cd388](f0cd388))
* **forms:** add `Iterate.Count` along with `Iterate.useCount` ([#3492](#3492)) ([f1574a2](f1574a2))
* **forms:** add `Iterate` view and edit container as well as animated container ([#3474](#3474)) ([6b68020](6b68020))
* **forms:** add `useValueProps` hook for handling Value components and their props ([#3498](#3498)) ([1a62545](1a62545))
* **forms:** add `Value.Composition` component ([#3494](#3494)) ([b7976ca](b7976ca))
* **forms:** add EditButton to Wizard ([#3445](#3445)) ([ec4a0a6](ec4a0a6))
* **forms:** add send variant prop to SubmitButton ([#3446](#3446)) ([17bea62](17bea62))
* **forms:** add support for GlobalStatus handling including custom `globalStatusId` ([#3457](#3457)) ([3fd0b96](3fd0b96))
* **forms:** release stable version ([#3043](#3043)) ([03b89b2](03b89b2))
* **forms:** rename useLocale to useTranslation ([#3447](#3447)) ([c223e0e](c223e0e))
* **Hr:** change color from black-80 to black-8 and add `dashed` line option ([#3490](#3490)) ([8142182](8142182))
* **Input & Textarea:** allow React Element as placeholder prop ([#3467](#3467)) ([2bbd24b](2bbd24b))
* **Input:** refactor and correct border outline ([#3440](#3440)) ([6a96665](6a96665))
* **Iterate:** deprecate `ArrayPushButton` in favor of `PushButton` and deprecate `ArrayRemoveElementButton` in favor of `RemoveButton` ([#3478](#3478)) ([e5145d4](e5145d4))
* **ProgressIndicator:** refactor to TypeScript and camelCase props ([#3458](#3458)) ([4fa895f](4fa895f))
* **Tabs:** add `breakout` prop for Tabs ([#3384](#3384)) ([48882cb](48882cb))
* **Typography:** Replace inline font with font files (Sbanken) ([#3459](#3459)) ([97d060d](97d060d))
* **useTranslation:** add support for custom translations and `formatMessage` method ([#3442](#3442)) ([d3c4ec4](d3c4ec4)), closes [#3271](#3271)
* **Visibility:** add `keepInDOM` prop ([#3495](#3495)) ([b750588](b750588))
@tujoworker
Copy link
Member Author

🎉 This PR is included in version 10.27.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
Labels
Development

Successfully merging this pull request may close these issues.

2 participants