fix: disabled items should not be selectable(#434) #436
Conversation
| "react-test-renderer": "^16.2.0", | ||
| "react-testing-library": "^1.1.0", | ||
| "react-test-renderer": "^16.3.2", | ||
| "react-testing-library": "^2.3.0", |
| renderSpy, | ||
| input, | ||
| arrowDownInput: extraEventProps => | ||
| Simulate.keyDown(input, {key: 'ArrowDown', ...extraEventProps}), |
There was a problem hiding this comment.
Since we're rendering into the document, could we use fireEvent instead?
| const firstItem = utils.queryByTestId('item-0') | ||
| expect(firstItem.hasAttribute('disabled')).toBe(true) | ||
|
|
||
| // input.simulate('keydown') |
There was a problem hiding this comment.
This comment here doesn't add anything I think. The name of the function is sufficient documentation :)
| <div> | ||
| <input {...getInputProps({'data-testid': 'input'})} /> |
There was a problem hiding this comment.
What's the purpose of this data-testid?
There was a problem hiding this comment.
Later on in this function I query for the input element:
const input = utils.queryByTestId('input')
| @@ -514,6 +514,12 @@ class Downshift extends Component { | |||
| Enter(event) { | |||
| if (this.getState().isOpen) { | |||
| event.preventDefault() | |||
| const itemIndex = this.getState().highlightedIndex | |||
| fireEvent.keyDown(input, {key: 'Enter', ...extraEventProps}), | ||
| changeInputValue: (value, extraEventProps) => { | ||
| input.value = value | ||
| fireEvent.change(input, {...extraEventProps}) |
There was a problem hiding this comment.
I change the value of the input manually beforehand. Is there a better way to do it like passing it to the event?
There was a problem hiding this comment.
Maybe, but I prefer this anyway 👍 Thanks!
| fireEvent.keyDown(input, {key: 'Enter', ...extraEventProps}), | ||
| changeInputValue: (value, extraEventProps) => { | ||
| input.value = value | ||
| fireEvent.change(input, {...extraEventProps}) |
There was a problem hiding this comment.
Maybe, but I prefer this anyway 👍 Thanks!
| <div> | ||
| <input {...getInputProps({'data-testid': 'input'})} /> |
|
Would you like to add yourself to the contributors table? |
|
Thanks so much for your help! I've added you as a collaborator on the project. Please make sure that you review the |
…hift-js#436) * disabled items cannot be selected * updated react-test-renderer and react-testing-library * added test for checking selection behaviour of disabled items * removed comment, used fireEvent instead of Simulate
Problem #434
At the moment it is possible to select a disabled item by pressing enter although selection by click is disabled. Personally, I think it should not be possible to select a disabled item (at least not for the user).
Solution
The event handler checks the DOM-node of the item for the disabled prop.