Focus is not handled correctly with portals

[karolis-cekaitis]

Describe the bug When using datepicker with portals, focus does not go into datepicker from input

To Reproduce

1. Go to https://reactdatepicker.com/#example-portal-by-id
2. Click input
3. Click "tab"

Actual behavior Focus goes to the next tabable object (this case textarea). If you have multiple date inputs by each other - multiple datepickers will open.

Expected behavior Focus goes into datepicker like with example where portal is not used

Desktop (please complete the following information):

• OS: [Win10
• Browser Chrome
• Version 99.0.4844.74

[ghost]

Also noticed same behavior occurs even without portals, when "Shift + Tab" is clicked: datepicker remains open -> focus goes to other input and may open another datepicker if input is for date.

And now thinking of this form UX side, maybe it should never go into datepicker when using Tab, because that would be annoying if user needs to tab trough bigger form with few date inputs and needs to escape on each... And if he want to enter datepicker, he uses arrows (that works now) Still datepicker then needs to close when user goes to other input

[mellis481]

This is a significant issue, effectively making react-datepicker inaccessible in cases where the date picker is used with portals (a common scenario). Hoping this gets addressed quickly.

[ghost]

actually it as accessible with arrows, and that would be preferred over tabbing into, because if user tabs over form, he don't want to get stuck into some date field that is not even what he want's to fill in. Bigger problems are that this:

• works inconsistently with and without portals or even tab versus shift+tab.
• datepicker is left open after user tabs to another input with portals or uses shift+tab without portals

[rene-stesl]

Same Problem here!!! We have to use Portals to be sure the Datepicker is rendered correctly in our application since there are possibilities that somewhere in the App position: relative is set. See example: https://stackblitz.com/edit/react-ts-vfxgwp?file=App.tsx

Problem seems to be this code in the ReactDatepicker index.js: ` handleBlur = (event) => { if (!this.state.open || this.props.withPortal || this.props.showTimeInput) { this.props.onBlur(event); }

this.setState({ focused: false });

};`

would it help if the if statement is extended with the portalId? if (!this.state.open || this.props.withPortal || this.props.portalId || this.props.showTimeInput)