Skip to content

Commit

Permalink
fix(DatePicker): make focus handling on input work on second click
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Mar 1, 2023
1 parent c20c2b8 commit df5cac0
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 30 deletions.
25 changes: 14 additions & 11 deletions packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,20 +301,20 @@ export default class DatePickerInput extends React.PureComponent {

await wait(1) // to get the correct position afterwards

const endPos = target.value.length
target.focus()
target.setSelectionRange(0, endPos)
selectAll(target)
} catch (e) {
warn(e)
}
}

selectStart = (target) => {
target.focus()
target.setSelectionRange(0, 0)
}

onFocusHandler = (event) => {
try {
const target = event.target
const endPos = target.value.length
target.focus()
target.setSelectionRange(0, endPos)
selectAll(event.target)
} catch (e) {
warn(e)
}
Expand All @@ -337,6 +337,10 @@ export default class DatePickerInput extends React.PureComponent {
const keyCode = keycode(event)
const target = event.target

if (target.selectionStart !== target.selectionEnd) {
this.selectStart(target)
}

// only to process key up and down press
switch (keyCode) {
case 'up':
Expand Down Expand Up @@ -522,7 +526,6 @@ export default class DatePickerInput extends React.PureComponent {
params = {
...params,
onKeyDown: this.onKeyDownHandler,
onMouseUp: selectInput,
onPaste: this.shortcutHandler,
onFocus: (e) => {
this.focusMode = mode
Expand Down Expand Up @@ -754,9 +757,9 @@ export default class DatePickerInput extends React.PureComponent {
}
}

const selectInput = (e) => {
e.target.focus()
e.target.select()
const selectAll = (target) => {
target.focus()
target.select()
}

const InputElement = (props) => {
Expand Down
100 changes: 99 additions & 1 deletion packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ import {
getCalendar,
makeDayObject,
} from '../DatePickerCalc'
import { fireEvent, render } from '@testing-library/react'

beforeEach(() => {
document.body.innerHTML = ''
})

describe('DatePicker component', () => {
// for the integration tests
Expand Down Expand Up @@ -1006,7 +1011,7 @@ describe('DatePicker component', () => {
)
})

it('has to have a aria-describedby on first focus', async () => {
it('has to have a aria-describedby on first focus', () => {
const label = 'Input Label'
const Comp = mount(
<Component
Expand All @@ -1025,6 +1030,99 @@ describe('DatePicker component', () => {
expect(legendElem.instance().classList).toContain('dnb-sr-only')
})

it('has to select all only on first focus', () => {
render(
<Component
id="custom-id"
label="Input Label"
range
start_date={defaultProps.start_date}
/>
)

const inputElement = document.querySelector(
'input.dnb-input__input'
) as HTMLInputElement

fireEvent.focus(inputElement)

expect(inputElement.selectionStart).toBe(0)
expect(inputElement.selectionEnd).toBe(2)

fireEvent.keyDown(inputElement, {
key: 'A',
})

expect(inputElement.selectionStart).toBe(0)
expect(inputElement.selectionEnd).toBe(0)

fireEvent.mouseUp(inputElement)

expect(inputElement.selectionStart).toBe(0)
expect(inputElement.selectionEnd).toBe(0)

fireEvent.focus(inputElement)

expect(inputElement.selectionStart).toBe(0)
expect(inputElement.selectionEnd).toBe(2)
})

it('has to focus on date picker on opening', () => {
render(
<Component
id="custom-id"
label="Input Label"
show_input
range
start_date={defaultProps.start_date}
end_date={defaultProps.end_date}
/>
)

const element = document.querySelector('.dnb-date-picker')
const buttonElement = document.querySelector(
'button.dnb-input__submit-button__button'
)

expect(document.activeElement).toBe(document.body)

fireEvent.click(buttonElement)

expect(
element.classList.contains('dnb-date-picker--opened')
).toBeTruthy()

const tableElement = document.querySelector('table')

expect(document.activeElement).toBe(tableElement)
})

it('should not set focus when disable_autofocus is set', () => {
render(
<Component
id="custom-id"
label="Input Label"
show_input
disable_autofocus
start_date={defaultProps.start_date}
/>
)

const element = document.querySelector('.dnb-date-picker')
const buttonElement = document.querySelector(
'button.dnb-input__submit-button__button'
)

expect(document.activeElement).toBe(document.body)

fireEvent.click(buttonElement)

expect(document.activeElement).toBe(document.body)
expect(
element.classList.contains('dnb-date-picker--opened')
).toBeTruthy()
})

it('has to react on keydown events', async () => {
const Comp = mount(
<Component
Expand Down
18 changes: 0 additions & 18 deletions ...s/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -574,7 +574,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
placeholderChar="d"
size="2"
Expand Down Expand Up @@ -624,7 +623,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
pipe={null}
placeholderChar="d"
Expand All @@ -650,7 +648,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
size="2"
spellCheck={false}
Expand Down Expand Up @@ -711,7 +708,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
placeholderChar="m"
size="2"
Expand Down Expand Up @@ -761,7 +757,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
pipe={null}
placeholderChar="m"
Expand All @@ -787,7 +782,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
size="2"
spellCheck={false}
Expand Down Expand Up @@ -850,7 +844,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
placeholderChar="å"
size="4"
Expand Down Expand Up @@ -902,7 +895,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
pipe={null}
placeholderChar="å"
Expand All @@ -928,7 +920,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
size="4"
spellCheck={false}
Expand Down Expand Up @@ -988,7 +979,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
placeholderChar="d"
size="2"
Expand Down Expand Up @@ -1038,7 +1028,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
pipe={null}
placeholderChar="d"
Expand All @@ -1064,7 +1053,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
size="2"
spellCheck={false}
Expand Down Expand Up @@ -1125,7 +1113,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
placeholderChar="m"
size="2"
Expand Down Expand Up @@ -1175,7 +1162,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
pipe={null}
placeholderChar="m"
Expand All @@ -1201,7 +1187,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
size="2"
spellCheck={false}
Expand Down Expand Up @@ -1264,7 +1249,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
placeholderChar="å"
size="4"
Expand Down Expand Up @@ -1316,7 +1300,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
pipe={null}
placeholderChar="å"
Expand All @@ -1342,7 +1325,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseUp={[Function]}
onPaste={[Function]}
size="4"
spellCheck={false}
Expand Down

0 comments on commit df5cac0

Please sign in to comment.