diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js index c476ecdf81b..d9cda638a98 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js +++ b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js @@ -6,6 +6,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' +import keycode from 'keycode' import { registerElement, // processChildren, @@ -224,6 +225,7 @@ export default class DatePicker extends PureComponent { endDate: null, _startDate: props.start_date, _endDate: props.end_date, + showInput: props.show_input, opened, hidden: !opened, direction: props.direction, @@ -273,17 +275,30 @@ export default class DatePicker extends PureComponent { setOutsideClickHandler = () => { if (!this.handleClickOutside && typeof document !== 'undefined') { this.handleClickOutside = event => { - let targetElement = event.target - do { - if (targetElement == this._wrapperRef.current) { - return // stop here - } - targetElement = targetElement.parentNode - } while (targetElement) - - this.hidePicker() + try { + let targetElement = event.target + do { + if (targetElement == this._wrapperRef.current) { + return // stop here + } + targetElement = targetElement.parentNode + } while (targetElement) + + this.hidePicker() + } catch (e) { + console.log(e) + } } document.addEventListener('mousedown', this.handleClickOutside) + + this.keydownCallback = event => { + const keyCode = keycode(event) + if (keyCode === 'esc') { + window.removeEventListener('keydown', this.keydownCallback) + this.hidePicker() + } + } + window.addEventListener('keydown', this.keydownCallback) } } @@ -292,6 +307,10 @@ export default class DatePicker extends PureComponent { document.removeEventListener('mousedown', this.handleClickOutside) this.handleClickOutside = null } + if (this.keydownCallback) { + window.removeEventListener('keydown', this.keydownCallback) + this.keydownCallback = null + } } componentWillUnmount() { @@ -299,6 +318,12 @@ export default class DatePicker extends PureComponent { this.removeOutsideClickHandler() } + onSubmitButtonFocus = () => { + this.setState({ + showInput: true + }) + } + onInputChange = ({ startDate, endDate }) => { // make sure endDate is same as startDate if we don't use range if (!this.props.range) { @@ -451,7 +476,7 @@ export default class DatePicker extends PureComponent { label, only_month, hide_navigation_buttons, - show_input, + show_input /* eslint-disable-line */, range, first_day, reset_date, @@ -496,6 +521,7 @@ export default class DatePicker extends PureComponent { maxDate, opened, hidden, + showInput, show_submit_button, show_cancel_button } = this.state @@ -530,7 +556,7 @@ export default class DatePicker extends PureComponent { 'dnb-date-picker', opened && 'dnb-date-picker--opened', hidden && 'dnb-date-picker--hidden', - show_input && 'dnb-date-picker--show-input', + showInput && 'dnb-date-picker--show-input', (show_submit_button || show_cancel_button) && 'dnb-date-picker--show-footer' @@ -555,6 +581,8 @@ export default class DatePicker extends PureComponent { endDate={endDate} minDate={minDate} maxDate={maxDate} + showInput={showInput} + onSubmitButtonFocus={this.onSubmitButtonFocus} {...inputParams} /> {showStatus && ( diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js b/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js index 6efa416707f..c0d9acc19df 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js +++ b/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js @@ -31,8 +31,10 @@ export const propTypes = { maxDate: PropTypes.instanceOf(Date), range: PropTypes.bool, disabled: PropTypes.bool, + showInput: PropTypes.bool, onChange: PropTypes.func, onSubmit: PropTypes.func, + onSubmitButtonFocus: PropTypes.func, onFocus: PropTypes.func } @@ -45,8 +47,10 @@ export const defaultProps = { minDate: null, maxDate: null, disabled: null, + showInput: null, onChange: null, onSubmit: null, + onSubmitButtonFocus: null, onFocus: null } @@ -123,6 +127,27 @@ export default class DatePickerInput extends PureComponent { return state } + onKeyUpHandler = () => { + if (this.props.showInput) { + return + } + if (this._startDayRef.current) { + setTimeout(() => { + try { + const elem = this._startDayRef.current.inputElement + elem.focus() + elem.select() + } catch (e) { + console.log(e) + } + }, 100) + } + if (typeof this.props.onSubmitButtonFocus === 'function') { + this.props.onSubmitButtonFocus() + } + this.onKeyUpHandler = null + } + onPickerChange = ({ startDate, endDate }) => { this.setState({ startDate, @@ -477,6 +502,8 @@ export default class DatePickerInput extends PureComponent { onChange /* eslint-disable-line */, onFocus /* eslint-disable-line */, onSubmit /* eslint-disable-line */, + onSubmitButtonFocus /* eslint-disable-line */, + showInput /* eslint-disable-line */, disabled, ...rest @@ -498,7 +525,10 @@ export default class DatePickerInput extends PureComponent { // title={submit_button_title} // Not implemented yet icon="calendar" variant="secondary" - on_submit={this.props.onSubmit} + on_submit={onSubmit} + // on_submit={this.onKeyUpHandler} + // onFocus={this.onKeyUpHandler} + onKeyUp={this.onKeyUpHandler} {...rest} /> } diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap index 80c7e483ef1..07e7d4a282e 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap +++ b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap @@ -86,8 +86,10 @@ exports[`DatePicker component have to match snapshot 1`] = ` onChange={[Function]} onFocus={[Function]} onSubmit={[Function]} + onSubmitButtonFocus={[Function]} range={true} separatorRexExp={/\\[-\\\\/ \\]/g} + showInput={true} startDate={2019-01-01T00:00:00.000Z} > @@ -661,6 +667,7 @@ exports[`DatePicker component have to match snapshot 1`] = ` onBlur={[Function]} onClick={[Function]} onFocus={[Function]} + onKeyUp={[Function]} on_click={null} size="medium" text={null} @@ -1602,13 +1609,13 @@ a.dnb-button:active, a.dnb-button:focus { margin-right: 2.2rem; } .dnb-date-picker__input__wrapper { - display: block; - width: 0; - visibility: hidden; } + display: none; } .dnb-date-picker--show-input .dnb-date-picker__input__wrapper { - width: auto; - visibility: visible; } + display: block; } + +.dnb-input__submit-button button:focus ~ .dnb-date-picker__input__wrapper { + display: block; } .dnb-date-picker--separator { margin: 0 -0.2rem; } diff --git a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss index 43e30aecafa..3949ef8d27c 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss +++ b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss @@ -139,13 +139,13 @@ margin-right: 2.2rem; } &__input__wrapper { - display: block; - width: 0; // hide input by default - visibility: hidden; + display: none; } &--show-input &__input__wrapper { - width: auto; - visibility: visible; + display: block; + } + .dnb-input__submit-button button:focus ~ &__input__wrapper { + display: block; } &--separator {