@instructure/ui-date-time-input 8.26.0 → 8.26.1-snapshot-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 (7) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/es/DateTimeInput/index.js +23 -19
  3. package/lib/DateTimeInput/index.js +23 -20
  4. package/package.json +18 -18
  5. package/src/DateTimeInput/index.tsx +27 -23
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/DateTimeInput/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [8.26.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.26.0...v8.26.1-snapshot-2) (2022-07-06)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ui-date-time-input:** fix enter not applyting date in React 16 ([244bb8d](https://github.com/instructure/instructure-ui/commit/244bb8df0b9955da6eef0ceba23e19e547a6720c))
12
+
13
+
14
+
15
+
16
+
6
17
  # [8.26.0](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.26.0) (2022-06-30)
7
18
 
8
19
  **Note:** Version bump only for package @instructure/ui-date-time-input
package/es/DateTimeInput/index.js CHANGED
@@ -33,7 +33,6 @@ import { testable } from '@instructure/ui-testable';
33
33
  import { AccessibleContent } from '@instructure/ui-a11y-content';
34
34
  import { IconButton } from '@instructure/ui-buttons';
35
35
  import { IconArrowOpenEndSolid, IconArrowOpenStartSolid } from '@instructure/ui-icons';
36
- import { debounce } from '@instructure/debounce';
37
36
  import { propTypes, allowedProps } from './props';
38
37
  /**
39
38
  ---
@@ -72,22 +71,29 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
72
71
  };
73
72
 
74
73
  this.handleHideCalendar = event => {
75
- // update state based on the DateInput's text value
76
- if (this.state.dateInputTextChanged || event.key === 'Enter') {
77
- const dateParsed = this.tryParseDate(this.state.dateInputText);
78
- this.updateStateBasedOnDateInput(dateParsed, event);
79
- } else {
80
- // user clicked outside or tabbed away or pressed esc, reset text
74
+ // prevent event pooling https://reactjs.org/docs/legacy-event-pooling.html
75
+ // Remove if React 16 is no longer supported
76
+ event.persist(); // timeout is needed here because handleDayClick could be called in the same
77
+ // frame, and it updates calendarSelectedDate which is read in here.
78
+
79
+ window.setTimeout(() => {
80
+ // update state based on the DateInput's text value
81
+ if (this.state.dateInputTextChanged || event.key === 'Enter') {
82
+ const dateParsed = this.tryParseDate(this.state.dateInputText);
83
+ this.updateStateBasedOnDateInput(dateParsed, event);
84
+ } else {
85
+ // user clicked outside or tabbed away or pressed esc, reset text
86
+ this.setState({
87
+ dateInputText: this.state.iso ? this.state.iso.format(this.dateFormat) : '',
88
+ calendarSelectedDate: this.state.iso ? this.state.iso.clone() : void 0
89
+ });
90
+ }
91
+
81
92
  this.setState({
82
- dateInputText: this.state.iso ? this.state.iso.format(this.dateFormat) : '',
83
- calendarSelectedDate: this.state.iso ? this.state.iso.clone() : void 0
93
+ isShowingCalendar: false,
94
+ dateInputTextChanged: false
84
95
  });
85
- }
86
-
87
- this.setState({
88
- isShowingCalendar: false,
89
- dateInputTextChanged: false
90
- });
96
+ }, 0);
91
97
  };
92
98
 
93
99
  this.handleTimeChange = (event, option) => {
@@ -497,10 +503,8 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
497
503
  placeholder: datePlaceholder,
498
504
  renderLabel: dateRenderLabel,
499
505
  renderWeekdayLabels: renderWeekdayLabels ? renderWeekdayLabels : this.defaultWeekdays,
500
- onRequestShowCalendar: this.handleShowCalendar // debounce is needed here because handleDayClick updates calendarSelectedDate
501
- // and this is read in handleHideCalendar
502
- ,
503
- onRequestHideCalendar: debounce(this.handleHideCalendar),
506
+ onRequestShowCalendar: this.handleShowCalendar,
507
+ onRequestHideCalendar: this.handleHideCalendar,
504
508
  isShowingCalendar: this.state.isShowingCalendar,
505
509
  renderNextMonthButton: this.renderNextPrevMonthButton('next'),
506
510
  renderPrevMonthButton: this.renderNextPrevMonthButton('prev'),
package/lib/DateTimeInput/index.js CHANGED
@@ -33,8 +33,6 @@ var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEnd
33
33
 
34
34
  var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenStartSolid.js");
35
35
 
36
- var _debounce = require("@instructure/debounce");
37
-
38
36
  var _props = require("./props");
39
37
 
40
38
  var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
@@ -77,22 +75,29 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
77
75
  };
78
76
 
79
77
  this.handleHideCalendar = event => {
80
- // update state based on the DateInput's text value
81
- if (this.state.dateInputTextChanged || event.key === 'Enter') {
82
- const dateParsed = this.tryParseDate(this.state.dateInputText);
83
- this.updateStateBasedOnDateInput(dateParsed, event);
84
- } else {
85
- // user clicked outside or tabbed away or pressed esc, reset text
78
+ // prevent event pooling https://reactjs.org/docs/legacy-event-pooling.html
79
+ // Remove if React 16 is no longer supported
80
+ event.persist(); // timeout is needed here because handleDayClick could be called in the same
81
+ // frame, and it updates calendarSelectedDate which is read in here.
82
+
83
+ window.setTimeout(() => {
84
+ // update state based on the DateInput's text value
85
+ if (this.state.dateInputTextChanged || event.key === 'Enter') {
86
+ const dateParsed = this.tryParseDate(this.state.dateInputText);
87
+ this.updateStateBasedOnDateInput(dateParsed, event);
88
+ } else {
89
+ // user clicked outside or tabbed away or pressed esc, reset text
90
+ this.setState({
91
+ dateInputText: this.state.iso ? this.state.iso.format(this.dateFormat) : '',
92
+ calendarSelectedDate: this.state.iso ? this.state.iso.clone() : void 0
93
+ });
94
+ }
95
+
86
96
  this.setState({
87
- dateInputText: this.state.iso ? this.state.iso.format(this.dateFormat) : '',
88
- calendarSelectedDate: this.state.iso ? this.state.iso.clone() : void 0
97
+ isShowingCalendar: false,
98
+ dateInputTextChanged: false
89
99
  });
90
- }
91
-
92
- this.setState({
93
- isShowingCalendar: false,
94
- dateInputTextChanged: false
95
- });
100
+ }, 0);
96
101
  };
97
102
 
98
103
  this.handleTimeChange = (event, option) => {
@@ -508,10 +513,8 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
508
513
  placeholder: datePlaceholder,
509
514
  renderLabel: dateRenderLabel,
510
515
  renderWeekdayLabels: renderWeekdayLabels ? renderWeekdayLabels : this.defaultWeekdays,
511
- onRequestShowCalendar: this.handleShowCalendar // debounce is needed here because handleDayClick updates calendarSelectedDate
512
- // and this is read in handleHideCalendar
513
- ,
514
- onRequestHideCalendar: (0, _debounce.debounce)(this.handleHideCalendar),
516
+ onRequestShowCalendar: this.handleShowCalendar,
517
+ onRequestHideCalendar: this.handleHideCalendar,
515
518
  isShowingCalendar: this.state.isShowingCalendar,
516
519
  renderNextMonthButton: this.renderNextPrevMonthButton('next'),
517
520
  renderPrevMonthButton: this.renderNextPrevMonthButton('prev'),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-date-time-input",
3
- "version": "8.26.0",
3
+ "version": "8.26.1-snapshot-2",
4
4
  "description": "A UI component that allows to select date and time.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,26 +23,26 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.26.0",
27
- "@instructure/ui-test-locator": "8.26.0",
28
- "@instructure/ui-test-utils": "8.26.0"
26
+ "@instructure/ui-babel-preset": "8.26.1-snapshot-2",
27
+ "@instructure/ui-test-locator": "8.26.1-snapshot-2",
28
+ "@instructure/ui-test-utils": "8.26.1-snapshot-2"
29
29
  },
30
30
  "dependencies": {
31
31
  "@babel/runtime": "^7.13.10",
32
- "@instructure/debounce": "8.26.0",
33
- "@instructure/emotion": "8.26.0",
34
- "@instructure/ui-a11y-content": "8.26.0",
35
- "@instructure/ui-buttons": "8.26.0",
36
- "@instructure/ui-calendar": "8.26.0",
37
- "@instructure/ui-date-input": "8.26.0",
38
- "@instructure/ui-form-field": "8.26.0",
39
- "@instructure/ui-i18n": "8.26.0",
40
- "@instructure/ui-icons": "8.26.0",
41
- "@instructure/ui-prop-types": "8.26.0",
42
- "@instructure/ui-react-utils": "8.26.0",
43
- "@instructure/ui-testable": "8.26.0",
44
- "@instructure/ui-time-select": "8.26.0",
45
- "@instructure/ui-utils": "8.26.0",
32
+ "@instructure/debounce": "8.26.1-snapshot-2",
33
+ "@instructure/emotion": "8.26.1-snapshot-2",
34
+ "@instructure/ui-a11y-content": "8.26.1-snapshot-2",
35
+ "@instructure/ui-buttons": "8.26.1-snapshot-2",
36
+ "@instructure/ui-calendar": "8.26.1-snapshot-2",
37
+ "@instructure/ui-date-input": "8.26.1-snapshot-2",
38
+ "@instructure/ui-form-field": "8.26.1-snapshot-2",
39
+ "@instructure/ui-i18n": "8.26.1-snapshot-2",
40
+ "@instructure/ui-icons": "8.26.1-snapshot-2",
41
+ "@instructure/ui-prop-types": "8.26.1-snapshot-2",
42
+ "@instructure/ui-react-utils": "8.26.1-snapshot-2",
43
+ "@instructure/ui-testable": "8.26.1-snapshot-2",
44
+ "@instructure/ui-time-select": "8.26.1-snapshot-2",
45
+ "@instructure/ui-utils": "8.26.1-snapshot-2",
46
46
  "prop-types": "^15"
47
47
  },
48
48
  "peerDependencies": {
package/src/DateTimeInput/index.tsx CHANGED
@@ -38,7 +38,6 @@ import {
38
38
  IconArrowOpenEndSolid,
39
39
  IconArrowOpenStartSolid
40
40
  } from '@instructure/ui-icons'
41
- import { debounce } from '@instructure/debounce'
42
41
  import type { DateTimeInputProps, DateTimeInputState } from './props'
43
42
  import { propTypes, allowedProps } from './props'
44
43
 
@@ -251,25 +250,32 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
251
250
  }
252
251
 
253
252
  handleHideCalendar = (event: SyntheticEvent) => {
254
- // update state based on the DateInput's text value
255
- if (
256
- this.state.dateInputTextChanged ||
257
- (event as unknown as KeyboardEvent).key === 'Enter'
258
- ) {
259
- const dateParsed = this.tryParseDate(this.state.dateInputText)
260
- this.updateStateBasedOnDateInput(dateParsed, event)
261
- } else {
262
- // user clicked outside or tabbed away or pressed esc, reset text
263
- this.setState({
264
- dateInputText: this.state.iso
265
- ? this.state.iso.format(this.dateFormat)
266
- : '',
267
- calendarSelectedDate: this.state.iso
268
- ? this.state.iso.clone()
269
- : undefined
270
- })
271
- }
272
- this.setState({ isShowingCalendar: false, dateInputTextChanged: false })
253
+ // prevent event pooling https://reactjs.org/docs/legacy-event-pooling.html
254
+ // Remove if React 16 is no longer supported
255
+ event.persist()
256
+ // timeout is needed here because handleDayClick could be called in the same
257
+ // frame, and it updates calendarSelectedDate which is read in here.
258
+ window.setTimeout(() => {
259
+ // update state based on the DateInput's text value
260
+ if (
261
+ this.state.dateInputTextChanged ||
262
+ (event as React.KeyboardEvent).key === 'Enter'
263
+ ) {
264
+ const dateParsed = this.tryParseDate(this.state.dateInputText)
265
+ this.updateStateBasedOnDateInput(dateParsed, event)
266
+ } else {
267
+ // user clicked outside or tabbed away or pressed esc, reset text
268
+ this.setState({
269
+ dateInputText: this.state.iso
270
+ ? this.state.iso.format(this.dateFormat)
271
+ : '',
272
+ calendarSelectedDate: this.state.iso
273
+ ? this.state.iso.clone()
274
+ : undefined
275
+ })
276
+ }
277
+ this.setState({ isShowingCalendar: false, dateInputTextChanged: false })
278
+ }, 0)
273
279
  }
274
280
 
275
281
  updateStateBasedOnDateInput(
@@ -552,9 +558,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
552
558
  renderWeekdayLabels ? renderWeekdayLabels : this.defaultWeekdays
553
559
  }
554
560
  onRequestShowCalendar={this.handleShowCalendar}
555
- // debounce is needed here because handleDayClick updates calendarSelectedDate
556
- // and this is read in handleHideCalendar
557
- onRequestHideCalendar={debounce(this.handleHideCalendar)}
561
+ onRequestHideCalendar={this.handleHideCalendar}
558
562
  isShowingCalendar={this.state.isShowingCalendar}
559
563
  renderNextMonthButton={this.renderNextPrevMonthButton('next')}
560
564
  renderPrevMonthButton={this.renderNextPrevMonthButton('prev')}