search

callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
12.94k stars 2.09k forks source link

Checkbox not working inside a DataTable cell #4130

Open jbsamonte15 opened 1 year ago

jbsamonte15 commented 1 year ago

Current behaviour

When I'm trying to click the checkbox inside a data table, it is not working. For context, I'm trying to run this on a web app.

Expected behavior

The expected behavior is that the checkbox will be enabled upon clicking it.

How to reproduce?

Sample code of the issue https://snack.expo.dev/HAg0OKrpW

Preview

https://github.com/callstack/react-native-paper/assets/123606236/ff453885-9795-4e5b-90a4-ddd7be1d9de0

What have you tried so far?

Switched the dependencies versions. ex. downgrading react-native-paper to a lower stable release

Your Environment

software version
ios x
android x
react-native 0.71.8
react-native-paper 5.9.1
node 18.13.0
npm or yarn 1.22.19
expo sdk x.x.x
lukewalczak commented 1 year ago

Hey @jbsamonte15, you can move the onPress={() => handleRowSelect(row)} to the DataTable.Cell :

          <DataTable.Cell onPress={() => handleRowSelect(row)}>
            <Checkbox
              status={selectedRows.includes(row.id) ? 'checked' : 'unchecked'}
            />
          </DataTable.Cell>
jbsamonte15 commented 1 year ago

Hi @lukewalczak may I ask why is it the case when we're binding it on a DataTable Cell? This may be of help if it is shared on the official documentation moving forward.

P.S. Code works image