carbon-react 147.4.1 → 147.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/esm/components/date/__internal__/date-picker/date-picker.component.js +19 -15
  2. package/lib/components/date/__internal__/date-picker/date-picker.component.js +19 -15
  3. package/package.json +1 -1
package/esm/components/date/__internal__/date-picker/date-picker.component.js CHANGED
@@ -85,23 +85,27 @@ export const DatePicker = ({
85
85
  }
86
86
  };
87
87
  const handleOnDayKeyDown = (_day, _modifiers, ev) => {
88
- // we need to manually handle this as the picker may be in a Portal
89
- /* istanbul ignore else */
90
- if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
91
- ev.preventDefault();
92
- setOpen(false);
93
- onPickerClose?.();
94
- const input = inputElement.current?.querySelector("input");
95
-
88
+ // timeout added to prevent this handler from interfering with the useFocusPortalContent hook, when the date-range
89
+ // is used inside of a popover-container and it is the last focusable element of the popover-container
90
+ setTimeout(() => {
91
+ // we need to manually handle this as the picker may be in a Portal
96
92
  /* istanbul ignore else */
97
- if (input) {
98
- const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
99
- const elementsInPicker = Array.from(ref.current?.querySelectorAll("button, [tabindex]") || /* istanbul ignore next */[]);
100
- const filteredElements = elements.filter(el => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el));
101
- const nextIndex = filteredElements.indexOf(input) + 1;
102
- filteredElements[nextIndex]?.focus();
93
+ if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
94
+ ev.preventDefault();
95
+ setOpen(false);
96
+ onPickerClose?.();
97
+ const input = inputElement.current?.querySelector("input");
98
+
99
+ /* istanbul ignore else */
100
+ if (input) {
101
+ const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
102
+ const elementsInPicker = Array.from(ref.current?.querySelectorAll("button, [tabindex]") || /* istanbul ignore next */[]);
103
+ const filteredElements = elements.filter(el => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el));
104
+ const nextIndex = filteredElements.indexOf(input) + 1;
105
+ filteredElements[nextIndex]?.focus();
106
+ }
103
107
  }
104
- }
108
+ }, 0);
105
109
  };
106
110
  useEffect(() => {
107
111
  if (selectedDays) {
package/lib/components/date/__internal__/date-picker/date-picker.component.js CHANGED
@@ -94,23 +94,27 @@ const DatePicker = ({
94
94
  }
95
95
  };
96
96
  const handleOnDayKeyDown = (_day, _modifiers, ev) => {
97
- // we need to manually handle this as the picker may be in a Portal
98
- /* istanbul ignore else */
99
- if (_events.default.isTabKey(ev) && !_events.default.isShiftKey(ev)) {
100
- ev.preventDefault();
101
- setOpen(false);
102
- onPickerClose?.();
103
- const input = inputElement.current?.querySelector("input");
104
-
97
+ // timeout added to prevent this handler from interfering with the useFocusPortalContent hook, when the date-range
98
+ // is used inside of a popover-container and it is the last focusable element of the popover-container
99
+ setTimeout(() => {
100
+ // we need to manually handle this as the picker may be in a Portal
105
101
  /* istanbul ignore else */
106
- if (input) {
107
- const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors) || /* istanbul ignore next */[]);
108
- const elementsInPicker = Array.from(ref.current?.querySelectorAll("button, [tabindex]") || /* istanbul ignore next */[]);
109
- const filteredElements = elements.filter(el => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el));
110
- const nextIndex = filteredElements.indexOf(input) + 1;
111
- filteredElements[nextIndex]?.focus();
102
+ if (_events.default.isTabKey(ev) && !_events.default.isShiftKey(ev)) {
103
+ ev.preventDefault();
104
+ setOpen(false);
105
+ onPickerClose?.();
106
+ const input = inputElement.current?.querySelector("input");
107
+
108
+ /* istanbul ignore else */
109
+ if (input) {
110
+ const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors) || /* istanbul ignore next */[]);
111
+ const elementsInPicker = Array.from(ref.current?.querySelectorAll("button, [tabindex]") || /* istanbul ignore next */[]);
112
+ const filteredElements = elements.filter(el => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el));
113
+ const nextIndex = filteredElements.indexOf(input) + 1;
114
+ filteredElements[nextIndex]?.focus();
115
+ }
112
116
  }
113
- }
117
+ }, 0);
114
118
  };
115
119
  (0, _react.useEffect)(() => {
116
120
  if (selectedDays) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "147.4.1",
3
+ "version": "147.4.2",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",