[RAC] Disabled DatePicker stops Tab focus moving forward when used inside Modal & Dialog

[joonass-visma]

Provide a general summary of the issue here

When having disabled DatePicker inside Modal Dialog with some focusable elements before and after it (e.g. TextFields) and you start Tabbing through the fields with keyboard, the focus won't move past the DatePicker.

🤔 Expected Behavior?

Keyboard focus should jump over the disabled DatePicker and continue normally to next focusable element.

😯 Current Behavior

Keyboard focus gets stuck to last focusable element before disabled DatePicker.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Try adding to DatePicker with isDisabled=true after the "Last name" TextField in this example: https://react-spectrum.adobe.com/react-aria/Modal.html#example

Version

react-aria-components v1.4.1

What browsers are you seeing the problem on?

Firefox, Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[nwidynski]

@joonass-visma Thanks for reporting this 👍 , I can confirm the issue. As an intermediary solution, set the onKeyDown property of the last focusable element before the disabled date picker (e.g. the textfield) to an empty function.

@snowystinger We need to set tabIndex to -1 on spinButtonProps when disabled here.

react-spectrum/packages/@react-aria/spinbutton/src/useSpinButton.ts

Lines 177 to 189 in c703323

	spinButtonProps: {
	role: 'spinbutton',
	'aria-valuenow': value !== undefined && !isNaN(value) ? value : undefined,
	'aria-valuetext': ariaTextValue,
	'aria-valuemin': minValue,
	'aria-valuemax': maxValue,
	'aria-disabled': isDisabled || undefined,
	'aria-readonly': isReadOnly || undefined,
	'aria-required': isRequired || undefined,
	onKeyDown,
	onFocus,
	onBlur
	},

On another note, passing onKeyDown on the last focusable element of an overlay causes useKeyboard() to stop propagation, thereby causing the event not to reach the overlays FocusScope. The focus is subsequently not wrapped to the first element.

I figure this is expected behavior, but it comes a bit unintuitive to have to call continuePropagation() in order for the modal to keep working as intended - maybe we should make sure the event is always propagated somehow?