feat(DatePicker): render calendar in a react portal #4347

joakbjerk · 2024-12-02T11:42:17Z

vercel · 2024-12-02T11:42:21Z

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	Jan 21, 2025 9:32am

codesandbox-ci · 2024-12-06T09:45:59Z

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.

langz · 2024-12-08T19:29:48Z

Just an observation:

The date picker calendar looks to have more padding in main branch, then in this PR:

Screen.Recording.2024-12-08.at.20.28.18.mov

langz · 2024-12-08T19:33:39Z

Just curious, why do we make this change? Which benefits/improvements does this give to the users?

joakbjerk · 2024-12-09T09:07:39Z

Just curious, why do we make this change? Which benefits/improvements does this give to the users?

It will prevent issues like this, where the calendar gets hidden inside the parent container of the DatePicker

langz · 2024-12-09T09:29:08Z

Just curious, why do we make this change? Which benefits/improvements does this give to the users?

It will prevent issues like this, where the calendar gets hidden inside the parent container of the DatePicker

Nice nice, I've seen this this improvement when testing. Great 🚀

langz · 2024-12-09T13:02:08Z

Tabbing/focusing into the calendar seems to be different now, when using react portal than what's on main branch.
~~Bascically, I'm not able to tab into the calendar anymore, and select dates using the keyboard.~~
EDIT: The statement above is not correct, as I am actually able to select/switch dates using the arrow button, etc. But I never tried it, as there was no focus state 😅

Video of me tabbing into the calendar. From main branch:

Screen.Recording.2024-12-09.at.14.00.21.mov

Video of me tabbing into the calendar. In this PR:

Screen.Recording.2024-12-09.at.14.00.38.mov

Here you can also see that I some how manage to position the calendar further below under the input field. Not sure how I'm able to achieve that. Seems like it happens after I've tabbed, and it autoscrolls to top, and then I manually scroll down to the date picker again.

Update to the "positioning of the calendar"-issue, it seems to happen just by opening the calendar using space(or the keyboard), then waiting for 2-3 seconds:
Was not able to reproduce this error when using the mouse.

EDIT: It seems to be related to where the mouse is located when opening the calendar using the keyboard...
That's my experience at least :P

Screen.Recording.2024-12-09.at.14.10.00.mov

Screen.Recording.2024-12-09.at.14.17.31.mov

Co-authored-by: Tobias Høegh <tobias@tujo.no>

## [10.63.0](v10.62.4...v10.63.0) (2025-01-29) ### 📝 Documentation * **DrawerList:** fix dead link to data prop ([#4489](#4489)) ([612634f](612634f)) * **DrawerList:** minor doc improvement ([#4490](#4490)) ([ef3a816](ef3a816)) * **Extensions:** extend description ([#4456](#4456)) ([ffa0453](ffa0453)) * **Form.MainHeading, Form.SubHeading:** add `help` property to properties tabs ([#4442](#4442)) ([2148916](2148916)) * **Forms:** improve documentation on TypeScript type handling ([#4444](#4444)) ([b7639cb](b7639cb)), closes [#4443](#4443) * **GlobalStatus:** add example on how to add custom icon ([#4457](#4457)) ([f434a8e](f434a8e)) ### 🐛 Bug Fixes * **Autocomplete:** does not fail when clicking show all button ([#4445](#4445)) ([744781b](744781b)) * **Autocomplete:** focus issue when no valid data ([#4458](#4458)) ([1f2bba1](1f2bba1)) * **Blockquote:** contrast font color of code as child ([#4453](#4453)) ([9dfd6b4](9dfd6b4)) * **Field.Upload:** prevent `fileHandler` to run when it is validation errors ([#4506](#4506)) ([feb0217](feb0217)) * **Forms:** add animation support to Form.Visibility when used inside Value.SummaryList ([#4482](#4482)) ([c547f1a](c547f1a)) * **Forms:** don't open Field.SelectCountry when `defaultValue` was given ([#4477](#4477)) ([e9bc230](e9bc230)) * **Forms:** ensure `connectWithPath` type is given ([#4501](#4501)) ([64e7b41](64e7b41)) * **Forms:** ensure Field.Toggle supports iterate `{itemNo}` in label ([#4507](#4507)) ([dbbfa49](dbbfa49)) * **Forms:** ensure wizard step changes scroll so the StepIndicator is included at the top ([#4464](#4464)) ([352ad63](352ad63)) * **Forms:** provide `displayValue` and `label` to `transformData` from fields inside Iterate ([#4510](#4510)) ([f22b4c3](f22b4c3)) * **HeightAnimation:** ensure height does not lock during animation when nested ([#4493](#4493)) ([93974b5](93974b5)) * **InputMasked:** should work without any properties ([#4446](#4446)) ([2efc623](2efc623)) * refactor defaultProps to ES6 default parameters ([#4448](#4448)) ([34d109e](34d109e)), closes [#4447](#4447) * **Spacing:** ensure HTML elements like h1 use always a spacing reset ([#4463](#4463)) ([5ff0126](5ff0126)) * **ToggleButton:** add type for the `size` property ([#4459](#4459)) ([33ca39c](33ca39c)) ### ✨ Features * **DatePicker:** render calendar in a react portal ([#4347](#4347)) ([e5de516](e5de516)) * **Forms:** add `connectWithItemPath` to `onBlurValidator` and `onChangeValidator` to be used within Iterate ([#4518](#4518)) ([321550f](321550f)) * **Forms:** add `itemPath` property support to `Iterate.Array` ([#4479](#4479)) ([0cc8ff6](0cc8ff6)), closes [#4417](#4417) * **Forms:** add `itemPath` property support to `Iterate.PushButton` and `Iterate.PushContainer` ([#4499](#4499)) ([673d55c](673d55c)), closes [#4417](#4417) * **Forms:** add `Iterate.Visibility` to be used within `Iterate.Array` (relative paths) ([#4502](#4502)) ([68e96f8](68e96f8)) * **Forms:** add `transformSelection` to Field.Selection ([#4481](#4481)) ([430a373](430a373)) * **Forms:** add support for `required` property to `Iterate.Array` ([#4470](#4470)) ([ef6485b](ef6485b)) * **Forms:** add support for `required` property to Iterate.PushContainer ([#4467](#4467)) ([28479bc](28479bc)) * **Forms:** add support for arrays with errors for `onChangeValidator` and `onBlurValidator` ([#4511](#4511)) ([2fe99aa](2fe99aa)), closes [#4469](#4469) * **Forms:** add support for conditional function based `info`, `warning` and `error` props to all `Field.*` components ([#4421](#4421)) ([ad13e23](ad13e23)) * **Forms:** add support for inline `style` to `Field.Option` when used inside `Field.Selection` ([#4515](#4515)) ([3801d1e](3801d1e)) * **Forms:** deprecate `continuousValidation` in favor of `validateContinuously` ([#4441](#4441)) ([b6c3dad](b6c3dad)) * **Forms:** during submit, show field errors inside `Iterate.PushContainer` when `bubbleValidation` is true ([#4471](#4471)) ([95f8d76](95f8d76)) * **Forms:** ensure Form.Iterate and Form.Section containers close when cancel button is pressed ([#4494](#4494)) ([f25f44a](f25f44a)) * **Forms:** fix inactive `Iterate.PushContainer` blocking Wizard navigation when `bubbleValidation` is true ([#4473](#4473)) ([fa881d5](fa881d5)), closes [#4460](#4460) * **Forms:** provide the internal array as a third parameter to the callback function’s children in `Iterate.Array` ([#4466](#4466)) ([938f3c8](938f3c8)) * **Pagination:** add `barSpace` prop to set spacing only on the bar ([#4500](#4500)) ([ab77e62](ab77e62))

tujoworker · 2025-01-29T10:43:44Z

🎉 This PR is included in version 10.63.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

vercel bot had a problem deploying to Preview December 2, 2024 11:44 Failure

vercel bot had a problem deploying to Preview December 2, 2024 12:18 Failure

joakbjerk changed the title ~~feat(DatePicker): wrap calendar views in a React.Portal (WIP)~~ feat(DatePicker): wrap calendar views in a react portal (WIP) Dec 2, 2024

vercel bot had a problem deploying to Preview December 2, 2024 12:50 Failure

vercel bot had a problem deploying to Preview December 3, 2024 17:43 Failure

vercel bot had a problem deploying to Preview December 3, 2024 18:32 Failure

vercel bot had a problem deploying to Preview December 3, 2024 18:48 Failure

vercel bot had a problem deploying to Preview December 4, 2024 20:15 Failure

vercel bot had a problem deploying to Preview December 5, 2024 14:35 Failure

vercel bot had a problem deploying to Preview December 5, 2024 14:52 Failure

vercel bot had a problem deploying to Preview December 6, 2024 08:33 Failure

vercel bot deployed to Preview December 6, 2024 08:50 View deployment

joakbjerk force-pushed the feat/datepicker-calendar-portal branch from 0dde17e to 8ebef42 Compare December 6, 2024 08:55

joakbjerk changed the title ~~feat(DatePicker): wrap calendar views in a react portal (WIP)~~ feat(DatePicker): render calendar in a react portal Dec 6, 2024

joakbjerk marked this pull request as ready for review December 6, 2024 09:04

vercel bot deployed to Preview December 6, 2024 09:08 View deployment

vercel bot deployed to Preview December 6, 2024 09:47 View deployment

joakbjerk requested review from tujoworker and langz December 6, 2024 10:03

vercel bot deployed to Preview December 9, 2024 10:14 View deployment

vercel bot deployed to Preview December 9, 2024 10:48 View deployment

vercel bot deployed to Preview December 9, 2024 11:40 View deployment

vercel bot deployed to Preview December 11, 2024 11:21 View deployment

joakbjerk and others added 23 commits January 21, 2025 10:23

fix calendar line height

8c3ae48

fix calendar position at window resize

a31d9cc

update snapshot

a771c39

filter out preventClose

a62f004

make sure calendar follows input when in portal

cc26cb0

fix focus styling when in portal

9fa5a17

specify timeout type

928c31d

Co-authored-by: Tobias Høegh <tobias@tujo.no>

wrap eventlistner adding logic inside useEffect

93c4786

Co-authored-by: Tobias Høegh <tobias@tujo.no>

remove useLayoutEffect

e6cb167

setPosition in useLayoutEffect

7f5c789

Co-authored-by: Tobias Høegh <tobias@tujo.no>

update dependency array

4ecbaf9

Co-authored-by: Tobias Høegh <tobias@tujo.no>

set triangle position inside useLayoutEffect

6f79cb0

Co-authored-by: Tobias Høegh <tobias@tujo.no>

import useLayoutEffect

1dbf593

implement debounce helper

a6c56f2

add skipPortal test

2e48297

add test for detectOutsideClick using ref as ignore element

b6d76bb

update z-index

86e43cf

add shared container styles to mixin

854a2ed

consolidate container styling

0a53eac

fix style lint

b02b4ca

update snapshot

c7d5b14

re-add missing portal styles

f89615b

fix snapshot

9a6b455

joakbjerk force-pushed the feat/datepicker-calendar-portal branch from 3f53cdb to 9a6b455 Compare January 21, 2025 09:24

vercel bot deployed to Preview January 21, 2025 09:32 View deployment

joakbjerk merged commit e5de516 into main Jan 21, 2025
10 checks passed

joakbjerk deleted the feat/datepicker-calendar-portal branch January 21, 2025 10:22

tujoworker added the released label Jan 29, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(DatePicker): render calendar in a react portal #4347

feat(DatePicker): render calendar in a react portal #4347

joakbjerk commented Dec 2, 2024 •

edited

Loading

vercel bot commented Dec 2, 2024 •

edited

Loading

codesandbox-ci bot commented Dec 6, 2024 •

edited

Loading

langz commented Dec 8, 2024 •

edited

Loading

langz commented Dec 8, 2024

joakbjerk commented Dec 9, 2024

langz commented Dec 9, 2024

langz commented Dec 9, 2024 •

edited

Loading

tujoworker commented Jan 29, 2025

feat(DatePicker): render calendar in a react portal #4347

feat(DatePicker): render calendar in a react portal #4347

Conversation

joakbjerk commented Dec 2, 2024 • edited Loading

vercel bot commented Dec 2, 2024 • edited Loading

codesandbox-ci bot commented Dec 6, 2024 • edited Loading

langz commented Dec 8, 2024 • edited Loading

langz commented Dec 8, 2024

joakbjerk commented Dec 9, 2024

langz commented Dec 9, 2024

langz commented Dec 9, 2024 • edited Loading

tujoworker commented Jan 29, 2025

joakbjerk commented Dec 2, 2024 •

edited

Loading

vercel bot commented Dec 2, 2024 •

edited

Loading

codesandbox-ci bot commented Dec 6, 2024 •

edited

Loading

langz commented Dec 8, 2024 •

edited

Loading

langz commented Dec 9, 2024 •

edited

Loading