DataListCheck stops updating via state change once interacted with by user

We have a DataList construct that contains search results. The header row contains a ‘select all’ checkbox, and the result rows contain individual checkboxes.

When using the DataListCheck widget, we’ve noticed two issues:

• The ‘select all’ checkbox is unable to trigger the first row to appear selected
• Once the user manually checks or unchecks an individual checkbox, the ‘select all’ checkbox is no longer able to toggle the appearance of that checkbox.

We’ve verified that the underlying data structure is correct using console.log statements in the render method, and when we swap out the DataListCheck element for a regular Checkbox element instead, the behavior is correct.

Here are snippets of the UI code: Select all checkbox:

<DataListCheck aria-labelledby="width-ex1-check1"
                      className="checkbox"
                      isChecked={this.state.selectAllCheckValue}
                      checked={this.state.selectAllCheckValue}
                      aria-label="controlled checkbox example"
                      id="check"
                      onChange={this.handleSelectAll}
                    />

Individual checkboxes:

                {this.state.results.map((data, key) => (
                  <DataListItemRow id="data-rows">
                  {console.log(data[Search.KEY_CHECKEDITEM], data[Search.KEY_TRANSIENTPATH])}
                      <DataListCheck aria-labelledby="width-ex3-check1"
                        className="checkbox"
                        isChecked={data[Search.KEY_CHECKEDITEM]}
                        checked={data[Search.KEY_CHECKEDITEM]}
                        aria-label="controlled checkbox example"
                        id={data[Search.KEY_TRANSIENTPATH]}
                        name={data[Search.KEY_TRANSIENTPATH]}
                        onChange={this.handleDeleteCheckboxChange}
                        key={key}
                      />

                    <DataListItemCells key={data[Search.KEY_TRANSIENTPATH]}
                      dataListCells={[
                        <DataListCell key="div-title" width={2}>
                          {this.props.userAuthenticated &&
                            <Link to={data['pant:transientPath']}>{data["jcr:title"]}</Link>}
                          {!this.props.userAuthenticated &&
                            <a href={"/" + data['pant:transientPath'] + ".preview"} target="_blank">{data["jcr:title"]}</a>}
                        </DataListCell>,
                        <DataListCell key="div-description" width={2}>
                          <span>{data["jcr:description"]}</span>
                        </DataListCell>,
                        <DataListCell key="div-transient-source">
                          <span>{data["pant:transientSource"]}</span>
                        </DataListCell>,
                        <DataListCell key="div-transient-source-name">
                          <span>{data["pant:transientSourceName"]}</span>
                        </DataListCell>,
                        <DataListCell key="div-created">
                          <span >{this.formatDate(new Date(data["pant:dateUploaded"]))}</span>
                        </DataListCell>
                      ]}
                    />
                  </DataListItemRow>
                ))}

And here are the handlers: Select all:

  private handleSelectAll = (checked: boolean, event: FormEvent<HTMLInputElement>) => {
    console.log('selectAll start')
    console.log(this.state.results)

    this.transientPaths = []
    const newResults: any[] = []
    this.state.results.map(dataitem => {
      newResults.push(JSON.parse(JSON.stringify(dataitem))) // clones the object
      newResults[newResults.length - 1][Search.KEY_CHECKEDITEM] = checked
      if (checked) {
        this.transientPaths.push(dataitem[Search.KEY_TRANSIENTPATH])
      }
    })

    this.setState({
      deleteButtonVisible: checked,
      results: newResults,
      selectAllCheckValue: checked
    }, () => {
      console.log('selectAll finish')
      console.log(this.state.results)
    })
  }

Individual select:

  private handleDeleteCheckboxChange = (checked: boolean, event: FormEvent<HTMLInputElement>) => {
    console.log('handling check change for ', event.target['name'])
    this.transientPaths = []

    const newResults: any[] = []
    this.state.results.map(data => {
      newResults.push(JSON.parse(JSON.stringify(data))) // clones the object
      if (data[Search.KEY_TRANSIENTPATH] === event.target['name']) {
        newResults[newResults.length - 1][Search.KEY_CHECKEDITEM] = checked

        if (data[Search.KEY_CHECKEDITEM]) {
          this.transientPaths.push(data[Search.KEY_TRANSIENTPATH])
        }
      }
    })

    this.setState({
      deleteButtonVisible: this.transientPaths.length > 0,
      results: newResults,
      selectAllCheckValue: false
    })
  };

[benradey]

@kmcfaul You are correct. Upgrading to the latest version of react-core fixes the issue on my machine as well. I’m glad this is solved!

[kmcfaul]

@benradey

I wasn’t able to build the whole project (ran into issues running podman on Mac), but I was able to clone your repo/branch and build just the frontend project to reproduce your bug.

Updating the Patternfly version fixed the issue for me. Looking at the file history, it appears this issue was fixed in #3037

The version of @patternfly/react-core you need should be 3.116.1 or later. Let me know if you are still seeing the issue.