Skip to content

Commit 1237c3c

Browse files
thompsonglanishagg17
thompsongl
authored and
anishagg17
committed
[EuiSuperDatePicker] Bypass formatting null dates (elastic#3750)
* prevent formatting on null value * remove unnecessary cast * account for keyboard nav with null selection * CL
1 parent 6008dc6 commit 1237c3c

6 files changed

Lines changed: 273 additions & 963 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
- Fixed `EuiComboBox` always showing a scrollbar ([#3744](https://github.com/elastic/eui/pull/3744))
88
- Replaced `react-focus-lock` with `react-focus-on` ([#3631](https://github.com/elastic/eui/pull/3631))
9+
- Fixed errors in `EuiSuperDatePicker` related to invalid and `null` date formatting ([#3750](https://github.com/elastic/eui/pull/3750))
910

1011
## [`27.1.0`](https://github.com/elastic/eui/tree/v27.1.0)
1112

‎packages/react-datepicker.js‎

Lines changed: 57 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -212,11 +212,6 @@ UntouchabilityChecker.prototype.isUntouchable = function isUntouchable(node) {
212212

213213
var tabbable_1 = tabbable;
214214

215-
var tabbable$1 = /*#__PURE__*/Object.freeze({
216-
default: tabbable_1,
217-
__moduleExports: tabbable_1
218-
});
219-
220215
var immutable = extend;
221216

222217
var hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -237,7 +232,12 @@ function extend() {
237232
return target
238233
}
239234

240-
var tabbable$2 = ( tabbable$1 && tabbable_1 ) || tabbable$1;
235+
var immutable$1 = /*#__PURE__*/Object.freeze({
236+
default: immutable,
237+
__moduleExports: immutable
238+
});
239+
240+
var xtend = ( immutable$1 && immutable ) || immutable$1;
241241

242242
var listeningFocusTrap = null;
243243

@@ -246,7 +246,7 @@ function focusTrap(element, userOptions) {
246246
var container =
247247
typeof element === 'string' ? doc.querySelector(element) : element;
248248

249-
var config = immutable(
249+
var config = xtend(
250250
{
251251
returnFocusOnDeactivate: true,
252252
escapeDeactivates: true
@@ -418,7 +418,7 @@ function focusTrap(element, userOptions) {
418418
if (container.contains(e.target)) return;
419419
if (config.clickOutsideDeactivates) {
420420
deactivate({
421-
returnFocus: !tabbable$2.isFocusable(e.target)
421+
returnFocus: !tabbable_1.isFocusable(e.target)
422422
});
423423
} else {
424424
e.preventDefault();
@@ -473,7 +473,7 @@ function focusTrap(element, userOptions) {
473473
}
474474

475475
function updateTabbableNodes() {
476-
var tabbableNodes = tabbable$2(container);
476+
var tabbableNodes = tabbable_1(container);
477477
state.firstTabbableNode = tabbableNodes[0] || getInitialFocusNode();
478478
state.lastTabbableNode =
479479
tabbableNodes[tabbableNodes.length - 1] || getInitialFocusNode();
@@ -3027,9 +3027,16 @@ var Month = function (_React$Component) {
30273027
}
30283028
};
30293029

3030+
_this.onBlur = function () {
3031+
if (_this.props.accessibleMode) {
3032+
_this.setState({ readInstructions: false });
3033+
}
3034+
};
3035+
30303036
_this.onInputKeyDown = function (event) {
30313037
var eventKey = event.key;
3032-
var copy = newDate(_this.props.preSelection);
3038+
// `preSelection` can be `null` but `day` is required. Use it as a fallback if necessary for invalid entries.
3039+
var copy = _this.props.preSelection ? newDate(_this.props.preSelection) : newDate(_this.props.day);
30333040
var newSelection = void 0;
30343041
switch (eventKey) {
30353042
case "ArrowLeft":
@@ -3059,7 +3066,7 @@ var Month = function (_React$Component) {
30593066
case " ":
30603067
case "Enter":
30613068
event.preventDefault();
3062-
_this.handleDayClick(_this.props.preSelection, event);
3069+
_this.handleDayClick(copy, event);
30633070
break;
30643071
}
30653072
if (!newSelection) return; // Let the input component handle this keydown
@@ -3161,8 +3168,7 @@ var Month = function (_React$Component) {
31613168
"p",
31623169
{ "aria-live": true },
31633170
"You are focused on a calendar. Use the arrow keys to navigate the days in the month. Use the page up and down keys to navigate from month to month. Use the home and end keys to navigate from year to year.",
3164-
formatDate(this.props.preSelection, this.dayFormat),
3165-
" is the currently focused date."
3171+
this.props.preSelection ? formatDate(this.props.preSelection, this.dayFormat) + " is the\n currently focused date." : "No date is currently focused."
31663172
);
31673173
}
31683174

@@ -3175,7 +3181,8 @@ var Month = function (_React$Component) {
31753181
"aria-label": "month-" + this.props.day.format("YYYY-MM"),
31763182
tabIndex: this.props.accessibleMode ? 0 : -1,
31773183
onKeyDown: this.onInputKeyDown,
3178-
onFocus: this.onFocus
3184+
onFocus: this.onFocus,
3185+
onBlur: this.onBlur
31793186
},
31803187
React__default.createElement(
31813188
ScreenReaderOnly,
@@ -3311,8 +3318,10 @@ var Time = function (_React$Component) {
33113318
}
33123319

33133320
// update preSelection to the selection
3314-
this.setState({
3315-
preSelection: this.props.selected
3321+
this.setState(function (prevState) {
3322+
return {
3323+
preSelection: prevState.selected
3324+
};
33163325
});
33173326
}
33183327

@@ -3355,8 +3364,7 @@ var Time = function (_React$Component) {
33553364
"p",
33563365
{ "aria-live": true },
33573366
"You are a in a time selector. Use the up and down keys to select from other common times then press enter to confirm.",
3358-
formatDate(this.state.preSelection, this.timeFormat),
3359-
" is currently focused."
3367+
this.state.preSelection ? formatDate(this.state.preSelection, this.timeFormat) + " is currently\n focused." : "No time is currently focused."
33603368
);
33613369
}
33623370

@@ -3449,7 +3457,7 @@ var _initialiseProps = function _initialiseProps() {
34493457

34503458
this.onBlur = function () {
34513459
if (_this3.props.accessibleMode) {
3452-
_this3.setState({ isFocused: false });
3460+
_this3.setState({ readInstructions: false, isFocused: false });
34533461
}
34543462
};
34553463

@@ -4532,17 +4540,24 @@ var _objectKeysInternal = function (object, names) {
45324540
return result;
45334541
};
45344542

4543+
var _objectKeysInternal$1 = /*#__PURE__*/Object.freeze({
4544+
default: _objectKeysInternal,
4545+
__moduleExports: _objectKeysInternal
4546+
});
4547+
45354548
// IE 8- don't enum bug keys
45364549
var _enumBugKeys = (
45374550
'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf'
45384551
).split(',');
45394552

4553+
var $keys = ( _objectKeysInternal$1 && _objectKeysInternal ) || _objectKeysInternal$1;
4554+
45404555
// 19.1.2.14 / 15.2.3.14 Object.keys(O)
45414556

45424557

45434558

45444559
var _objectKeys = Object.keys || function keys(O) {
4545-
return _objectKeysInternal(O, _enumBugKeys);
4560+
return $keys(O, _enumBugKeys);
45464561
};
45474562

45484563
var f$1 = Object.getOwnPropertySymbols;
@@ -4597,26 +4612,40 @@ var _objectAssign = !$assign || _fails(function () {
45974612
} return T;
45984613
} : $assign;
45994614

4615+
var _objectAssign$1 = /*#__PURE__*/Object.freeze({
4616+
default: _objectAssign,
4617+
__moduleExports: _objectAssign
4618+
});
4619+
4620+
var require$$0 = ( _objectAssign$1 && _objectAssign ) || _objectAssign$1;
4621+
46004622
// 19.1.3.1 Object.assign(target, source)
46014623

46024624

4603-
_export(_export.S + _export.F, 'Object', { assign: _objectAssign });
4625+
_export(_export.S + _export.F, 'Object', { assign: require$$0 });
46044626

46054627
var assign = _core.Object.assign;
46064628

4607-
var assign$1 = createCommonjsModule(function (module) {
4608-
module.exports = { "default": assign, __esModule: true };
4629+
var assign$1 = /*#__PURE__*/Object.freeze({
4630+
default: assign,
4631+
__moduleExports: assign
4632+
});
4633+
4634+
var require$$0$1 = ( assign$1 && assign ) || assign$1;
4635+
4636+
var assign$2 = createCommonjsModule(function (module) {
4637+
module.exports = { "default": require$$0$1, __esModule: true };
46094638
});
46104639

4611-
unwrapExports(assign$1);
4640+
unwrapExports(assign$2);
46124641

46134642
var _extends$1 = createCommonjsModule(function (module, exports) {
46144643

46154644
exports.__esModule = true;
46164645

46174646

46184647

4619-
var _assign2 = _interopRequireDefault(assign$1);
4648+
var _assign2 = _interopRequireDefault(assign$2);
46204649

46214650
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
46224651

@@ -4991,7 +5020,7 @@ var _isArray = Array.isArray || function isArray(arg) {
49915020
var hiddenKeys = _enumBugKeys.concat('length', 'prototype');
49925021

49935022
var f$4 = Object.getOwnPropertyNames || function getOwnPropertyNames(O) {
4994-
return _objectKeysInternal(O, hiddenKeys);
5023+
return $keys(O, hiddenKeys);
49955024
};
49965025

49975026
var _objectGopn = {
@@ -5282,10 +5311,10 @@ var symbol$1 = /*#__PURE__*/Object.freeze({
52825311
__moduleExports: symbol
52835312
});
52845313

5285-
var require$$0 = ( symbol$1 && symbol ) || symbol$1;
5314+
var require$$0$2 = ( symbol$1 && symbol ) || symbol$1;
52865315

52875316
var symbol$2 = createCommonjsModule(function (module) {
5288-
module.exports = { "default": require$$0, __esModule: true };
5317+
module.exports = { "default": require$$0$2, __esModule: true };
52895318
});
52905319

52915320
unwrapExports(symbol$2);

0 commit comments

Comments
 (0)