add support for disabling data table selection (checkbox/radio) #3126
Conversation
meizibupt
changed the title
|
@meizibupt I'm going to look at this a little more later tonight, but when I pulled it down and used it. The main issue I'm seeing is that Nav to Edit mode and try to set focus on the disabled item. To reproduce, navigate with the arrow keys and then press enter. Focus visually disappears/gets lost. I would recommend disabling switching to edit mode, essentially ignoring the switch to edit mode |
|
Demo: |
thanks for reviewing. can you be more specific. what do you mean by disabling edit mode? do you mean disallowing navigating to the disabled checkbox? |
|
Yes, as in ignore the enter key if the child is disabled which is what is done when the content is only text in a cell. Please check me on this, but I believe returning a normal disabled Same with |
| @@ -124,7 +130,8 @@ class Example extends React.Component { | |||
| onRowChange={this.handleChanged} | |||
| onSort={this.handleSort} | |||
| selection={this.state.selection} | |||
| selectRows="radio" | |||
| disabledSelection={this.state.disabledSelection} | |||
| selectRows="checkbox" | |||
There was a problem hiding this comment.
This is the single select example for consumers. Please keep radio or choose another example.
There was a problem hiding this comment.
reverted the changes. I added a disabled checkbox in fixed-header example, which is already showing checkbox
| selection: [], | ||
| disabledSelection: [items[0]], | ||
| }; | ||
|
|
||
| handleChanged = (event, data) => { |
There was a problem hiding this comment.
Does the event fire on a disabled checkbox? It doesn't fire for me.
If the change event never fired, then the consumer doesn't need to worry about filtering.
There was a problem hiding this comment.
since checkbox is disabled, it is not triggered
There was a problem hiding this comment.
I'm asking about this line.
I'm thinking that disabled doesn't mean a row can't be selected. You could force select a row (that is make it selected) and then disable it.
const selections = data.selection.filter(
(s) => !this.state.disabledSelection.includes(s)
);
It's up to the application to decide whether to filter by disabled rows.
There was a problem hiding this comment.
yes. Makes sense. A row can be preselected but disabled.
| const disabledRows = tbody.querySelectorAll( | ||
| '.slds-checkbox input:disabled' | ||
| ); | ||
| disabledRows.should.have.length(1); |
There was a problem hiding this comment.
We should spy the onRowChange and make sure it doesn't fire OR make sure the data.selection parameter is still 0 in length. See can select a row below and negate it.
|
Great addition! @meizibupt |
Fixes #3125
Additional description
add option to disable radio/checkbox for datatable
CONTRIBUTOR checklist (do not remove)
Please complete for every pull request
npm run lint:fixhas been run and linting passes.components/component-docs.jsonCI tests pass (npm test).REVIEWER checklist (do not remove)
components/component-docs.jsontests.Required only if there are markup / UX changes
last-slds-markup-reviewinpackage.jsonand push.last-accessibility-review, topackage.jsonand push.npm run local-updatewithin locally cloned site repo to confirm the site will function correctly at the next release.