@elastic/eui 77.2.0 → 77.2.1

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 (6) hide show
  1. package/es/components/form/field_number/field_number.js +15 -17
  2. package/lib/components/form/field_number/field_number.js +14 -16
  3. package/optimize/es/components/form/field_number/field_number.js +15 -17
  4. package/optimize/lib/components/form/field_number/field_number.js +14 -16
  5. package/package.json +1 -1
  6. package/test-env/components/form/field_number/field_number.js +14 -16
package/es/components/form/field_number/field_number.js CHANGED
@@ -1,4 +1,4 @@
1
- var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyDown"];
1
+ var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp"];
2
2
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
3
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
4
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -16,10 +16,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
16
16
  * Side Public License, v 1.
17
17
  */
18
18
 
19
- import React, { useState, useRef, useCallback } from 'react';
19
+ import React, { useState, useCallback } from 'react';
20
20
  import PropTypes from "prop-types";
21
21
  import classNames from 'classnames';
22
- import { useCombinedRefs } from '../../../services';
23
22
  import { EuiValidatableControl } from '../validatable_control';
24
23
  import { EuiFormControlLayout } from '../form_control_layout';
25
24
  import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
@@ -48,29 +47,28 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
48
47
  inputRef = props.inputRef,
49
48
  readOnly = props.readOnly,
50
49
  controlOnly = props.controlOnly,
51
- _onKeyDown = props.onKeyDown,
50
+ _onKeyUp = props.onKeyUp,
52
51
  rest = _objectWithoutProperties(props, _excluded);
53
52
 
54
53
  // Attempt to determine additional invalid state. The native number input
55
54
  // will set :invalid state automatically, but we need to also set
56
55
  // `aria-invalid` as well as display an icon. We also want to *not* set this on
57
56
  // EuiValidatableControl, in order to not override custom validity messages
58
- var _useState = useState(false),
57
+ var _useState = useState(),
59
58
  _useState2 = _slicedToArray(_useState, 2),
60
59
  isNativelyInvalid = _useState2[0],
61
60
  setIsNativelyInvalid = _useState2[1];
62
- var validityRef = useRef(null);
63
- var setRefs = useCombinedRefs([validityRef, inputRef]);
64
61
 
65
62
  // Note that we can't use hook into `onChange` because browsers don't emit change events
66
63
  // for invalid values - see https://github.com/facebook/react/issues/16554
67
- var onKeyDown = useCallback(function (e) {
68
- _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
69
- // Wait a beat before checking validity - we can't use `e.target` as it's stale
70
- requestAnimationFrame(function () {
71
- setIsNativelyInvalid(!validityRef.current.validity.valid);
72
- });
73
- }, [_onKeyDown]);
64
+ var onKeyUp = useCallback(function (e) {
65
+ _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
66
+ var _ref = e.target,
67
+ validity = _ref.validity;
68
+ // Prefer `undefined` over `false` so that the `aria-invalid` prop unsets completely
69
+ var isInvalid = !validity.valid || undefined;
70
+ setIsNativelyInvalid(isInvalid);
71
+ }, [_onKeyUp]);
74
72
  var numIconsClass = controlOnly ? false : getFormControlClassNameForIconCount({
75
73
  isInvalid: isInvalid || isNativelyInvalid,
76
74
  isLoading: isLoading
@@ -94,9 +92,9 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
94
92
  placeholder: placeholder,
95
93
  readOnly: readOnly,
96
94
  className: classes,
97
- ref: setRefs,
98
- onKeyDown: onKeyDown,
99
- "aria-invalid": isInvalid || isNativelyInvalid
95
+ ref: inputRef,
96
+ onKeyUp: onKeyUp,
97
+ "aria-invalid": isInvalid == null ? isNativelyInvalid : isInvalid
100
98
  }, rest)));
101
99
  if (controlOnly) {
102
100
  return control;
package/lib/components/form/field_number/field_number.js CHANGED
@@ -8,13 +8,12 @@ exports.EuiFieldNumber = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
10
  var _classnames = _interopRequireDefault(require("classnames"));
11
- var _services = require("../../../services");
12
11
  var _validatable_control = require("../validatable_control");
13
12
  var _form_control_layout = require("../form_control_layout");
14
13
  var _num_icons = require("../form_control_layout/_num_icons");
15
14
  var _eui_form_context = require("../eui_form_context");
16
15
  var _react2 = require("@emotion/react");
17
- var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyDown"];
16
+ var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp"];
18
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
18
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
20
19
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -50,29 +49,28 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
50
49
  inputRef = props.inputRef,
51
50
  readOnly = props.readOnly,
52
51
  controlOnly = props.controlOnly,
53
- _onKeyDown = props.onKeyDown,
52
+ _onKeyUp = props.onKeyUp,
54
53
  rest = _objectWithoutProperties(props, _excluded);
55
54
 
56
55
  // Attempt to determine additional invalid state. The native number input
57
56
  // will set :invalid state automatically, but we need to also set
58
57
  // `aria-invalid` as well as display an icon. We also want to *not* set this on
59
58
  // EuiValidatableControl, in order to not override custom validity messages
60
- var _useState = (0, _react.useState)(false),
59
+ var _useState = (0, _react.useState)(),
61
60
  _useState2 = _slicedToArray(_useState, 2),
62
61
  isNativelyInvalid = _useState2[0],
63
62
  setIsNativelyInvalid = _useState2[1];
64
- var validityRef = (0, _react.useRef)(null);
65
- var setRefs = (0, _services.useCombinedRefs)([validityRef, inputRef]);
66
63
 
67
64
  // Note that we can't use hook into `onChange` because browsers don't emit change events
68
65
  // for invalid values - see https://github.com/facebook/react/issues/16554
69
- var onKeyDown = (0, _react.useCallback)(function (e) {
70
- _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
71
- // Wait a beat before checking validity - we can't use `e.target` as it's stale
72
- requestAnimationFrame(function () {
73
- setIsNativelyInvalid(!validityRef.current.validity.valid);
74
- });
75
- }, [_onKeyDown]);
66
+ var onKeyUp = (0, _react.useCallback)(function (e) {
67
+ _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
68
+ var _ref = e.target,
69
+ validity = _ref.validity;
70
+ // Prefer `undefined` over `false` so that the `aria-invalid` prop unsets completely
71
+ var isInvalid = !validity.valid || undefined;
72
+ setIsNativelyInvalid(isInvalid);
73
+ }, [_onKeyUp]);
76
74
  var numIconsClass = controlOnly ? false : (0, _num_icons.getFormControlClassNameForIconCount)({
77
75
  isInvalid: isInvalid || isNativelyInvalid,
78
76
  isLoading: isLoading
@@ -96,9 +94,9 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
96
94
  placeholder: placeholder,
97
95
  readOnly: readOnly,
98
96
  className: classes,
99
- ref: setRefs,
100
- onKeyDown: onKeyDown,
101
- "aria-invalid": isInvalid || isNativelyInvalid
97
+ ref: inputRef,
98
+ onKeyUp: onKeyUp,
99
+ "aria-invalid": isInvalid == null ? isNativelyInvalid : isInvalid
102
100
  }, rest)));
103
101
  if (controlOnly) {
104
102
  return control;
package/optimize/es/components/form/field_number/field_number.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyDown"];
4
+ var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp"];
5
5
  /*
6
6
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
7
7
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,9 +10,8 @@ var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max",
10
10
  * Side Public License, v 1.
11
11
  */
12
12
 
13
- import React, { useState, useRef, useCallback } from 'react';
13
+ import React, { useState, useCallback } from 'react';
14
14
  import classNames from 'classnames';
15
- import { useCombinedRefs } from '../../../services';
16
15
  import { EuiValidatableControl } from '../validatable_control';
17
16
  import { EuiFormControlLayout } from '../form_control_layout';
18
17
  import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
@@ -41,29 +40,28 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
41
40
  inputRef = props.inputRef,
42
41
  readOnly = props.readOnly,
43
42
  controlOnly = props.controlOnly,
44
- _onKeyDown = props.onKeyDown,
43
+ _onKeyUp = props.onKeyUp,
45
44
  rest = _objectWithoutProperties(props, _excluded);
46
45
 
47
46
  // Attempt to determine additional invalid state. The native number input
48
47
  // will set :invalid state automatically, but we need to also set
49
48
  // `aria-invalid` as well as display an icon. We also want to *not* set this on
50
49
  // EuiValidatableControl, in order to not override custom validity messages
51
- var _useState = useState(false),
50
+ var _useState = useState(),
52
51
  _useState2 = _slicedToArray(_useState, 2),
53
52
  isNativelyInvalid = _useState2[0],
54
53
  setIsNativelyInvalid = _useState2[1];
55
- var validityRef = useRef(null);
56
- var setRefs = useCombinedRefs([validityRef, inputRef]);
57
54
 
58
55
  // Note that we can't use hook into `onChange` because browsers don't emit change events
59
56
  // for invalid values - see https://github.com/facebook/react/issues/16554
60
- var onKeyDown = useCallback(function (e) {
61
- _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
62
- // Wait a beat before checking validity - we can't use `e.target` as it's stale
63
- requestAnimationFrame(function () {
64
- setIsNativelyInvalid(!validityRef.current.validity.valid);
65
- });
66
- }, [_onKeyDown]);
57
+ var onKeyUp = useCallback(function (e) {
58
+ _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
59
+ var _ref = e.target,
60
+ validity = _ref.validity;
61
+ // Prefer `undefined` over `false` so that the `aria-invalid` prop unsets completely
62
+ var isInvalid = !validity.valid || undefined;
63
+ setIsNativelyInvalid(isInvalid);
64
+ }, [_onKeyUp]);
67
65
  var numIconsClass = controlOnly ? false : getFormControlClassNameForIconCount({
68
66
  isInvalid: isInvalid || isNativelyInvalid,
69
67
  isLoading: isLoading
@@ -87,9 +85,9 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
87
85
  placeholder: placeholder,
88
86
  readOnly: readOnly,
89
87
  className: classes,
90
- ref: setRefs,
91
- onKeyDown: onKeyDown,
92
- "aria-invalid": isInvalid || isNativelyInvalid
88
+ ref: inputRef,
89
+ onKeyUp: onKeyUp,
90
+ "aria-invalid": isInvalid == null ? isNativelyInvalid : isInvalid
93
91
  }, rest)));
94
92
  if (controlOnly) {
95
93
  return control;
package/optimize/lib/components/form/field_number/field_number.js CHANGED
@@ -11,13 +11,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
11
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
  var _classnames = _interopRequireDefault(require("classnames"));
14
- var _services = require("../../../services");
15
14
  var _validatable_control = require("../validatable_control");
16
15
  var _form_control_layout = require("../form_control_layout");
17
16
  var _num_icons = require("../form_control_layout/_num_icons");
18
17
  var _eui_form_context = require("../eui_form_context");
19
18
  var _react2 = require("@emotion/react");
20
- var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyDown"];
19
+ var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp"];
21
20
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
22
21
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
22
  var EuiFieldNumber = function EuiFieldNumber(props) {
@@ -43,29 +42,28 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
43
42
  inputRef = props.inputRef,
44
43
  readOnly = props.readOnly,
45
44
  controlOnly = props.controlOnly,
46
- _onKeyDown = props.onKeyDown,
45
+ _onKeyUp = props.onKeyUp,
47
46
  rest = (0, _objectWithoutProperties2.default)(props, _excluded);
48
47
 
49
48
  // Attempt to determine additional invalid state. The native number input
50
49
  // will set :invalid state automatically, but we need to also set
51
50
  // `aria-invalid` as well as display an icon. We also want to *not* set this on
52
51
  // EuiValidatableControl, in order to not override custom validity messages
53
- var _useState = (0, _react.useState)(false),
52
+ var _useState = (0, _react.useState)(),
54
53
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
55
54
  isNativelyInvalid = _useState2[0],
56
55
  setIsNativelyInvalid = _useState2[1];
57
- var validityRef = (0, _react.useRef)(null);
58
- var setRefs = (0, _services.useCombinedRefs)([validityRef, inputRef]);
59
56
 
60
57
  // Note that we can't use hook into `onChange` because browsers don't emit change events
61
58
  // for invalid values - see https://github.com/facebook/react/issues/16554
62
- var onKeyDown = (0, _react.useCallback)(function (e) {
63
- _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
64
- // Wait a beat before checking validity - we can't use `e.target` as it's stale
65
- requestAnimationFrame(function () {
66
- setIsNativelyInvalid(!validityRef.current.validity.valid);
67
- });
68
- }, [_onKeyDown]);
59
+ var onKeyUp = (0, _react.useCallback)(function (e) {
60
+ _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
61
+ var _ref = e.target,
62
+ validity = _ref.validity;
63
+ // Prefer `undefined` over `false` so that the `aria-invalid` prop unsets completely
64
+ var isInvalid = !validity.valid || undefined;
65
+ setIsNativelyInvalid(isInvalid);
66
+ }, [_onKeyUp]);
69
67
  var numIconsClass = controlOnly ? false : (0, _num_icons.getFormControlClassNameForIconCount)({
70
68
  isInvalid: isInvalid || isNativelyInvalid,
71
69
  isLoading: isLoading
@@ -89,9 +87,9 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
89
87
  placeholder: placeholder,
90
88
  readOnly: readOnly,
91
89
  className: classes,
92
- ref: setRefs,
93
- onKeyDown: onKeyDown,
94
- "aria-invalid": isInvalid || isNativelyInvalid
90
+ ref: inputRef,
91
+ onKeyUp: onKeyUp,
92
+ "aria-invalid": isInvalid == null ? isNativelyInvalid : isInvalid
95
93
  }, rest)));
96
94
  if (controlOnly) {
97
95
  return control;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elastic/eui",
3
3
  "description": "Elastic UI Component Library",
4
- "version": "77.2.0",
4
+ "version": "77.2.1",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "lib",
7
7
  "module": "es",
package/test-env/components/form/field_number/field_number.js CHANGED
@@ -12,13 +12,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
  var _propTypes = _interopRequireDefault(require("prop-types"));
14
14
  var _classnames = _interopRequireDefault(require("classnames"));
15
- var _services = require("../../../services");
16
15
  var _validatable_control = require("../validatable_control");
17
16
  var _form_control_layout = require("../form_control_layout");
18
17
  var _num_icons = require("../form_control_layout/_num_icons");
19
18
  var _eui_form_context = require("../eui_form_context");
20
19
  var _react2 = require("@emotion/react");
21
- var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyDown"];
20
+ var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp"];
22
21
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
22
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
24
23
  var EuiFieldNumber = function EuiFieldNumber(props) {
@@ -44,29 +43,28 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
44
43
  inputRef = props.inputRef,
45
44
  readOnly = props.readOnly,
46
45
  controlOnly = props.controlOnly,
47
- _onKeyDown = props.onKeyDown,
46
+ _onKeyUp = props.onKeyUp,
48
47
  rest = (0, _objectWithoutProperties2.default)(props, _excluded);
49
48
 
50
49
  // Attempt to determine additional invalid state. The native number input
51
50
  // will set :invalid state automatically, but we need to also set
52
51
  // `aria-invalid` as well as display an icon. We also want to *not* set this on
53
52
  // EuiValidatableControl, in order to not override custom validity messages
54
- var _useState = (0, _react.useState)(false),
53
+ var _useState = (0, _react.useState)(),
55
54
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
56
55
  isNativelyInvalid = _useState2[0],
57
56
  setIsNativelyInvalid = _useState2[1];
58
- var validityRef = (0, _react.useRef)(null);
59
- var setRefs = (0, _services.useCombinedRefs)([validityRef, inputRef]);
60
57
 
61
58
  // Note that we can't use hook into `onChange` because browsers don't emit change events
62
59
  // for invalid values - see https://github.com/facebook/react/issues/16554
63
- var onKeyDown = (0, _react.useCallback)(function (e) {
64
- _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
65
- // Wait a beat before checking validity - we can't use `e.target` as it's stale
66
- requestAnimationFrame(function () {
67
- setIsNativelyInvalid(!validityRef.current.validity.valid);
68
- });
69
- }, [_onKeyDown]);
60
+ var onKeyUp = (0, _react.useCallback)(function (e) {
61
+ _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
62
+ var _ref = e.target,
63
+ validity = _ref.validity;
64
+ // Prefer `undefined` over `false` so that the `aria-invalid` prop unsets completely
65
+ var isInvalid = !validity.valid || undefined;
66
+ setIsNativelyInvalid(isInvalid);
67
+ }, [_onKeyUp]);
70
68
  var numIconsClass = controlOnly ? false : (0, _num_icons.getFormControlClassNameForIconCount)({
71
69
  isInvalid: isInvalid || isNativelyInvalid,
72
70
  isLoading: isLoading
@@ -90,9 +88,9 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
90
88
  placeholder: placeholder,
91
89
  readOnly: readOnly,
92
90
  className: classes,
93
- ref: setRefs,
94
- onKeyDown: onKeyDown,
95
- "aria-invalid": isInvalid || isNativelyInvalid
91
+ ref: inputRef,
92
+ onKeyUp: onKeyUp,
93
+ "aria-invalid": isInvalid == null ? isNativelyInvalid : isInvalid
96
94
  }, rest)));
97
95
  if (controlOnly) {
98
96
  return control;