Skip to content

When using native checkboxes, the custom ones are shown too #288

Closed
@puehringer

Description

@puehringer

Describe the bug
When setting nativeCheckboxes={true}, the custom checkboxes should be hidden and the input should be shown. Currently, it does not hide the custom checkboxes because of invalid CSS.

Reproduction steps
Just set nativeCheckboxes={true} in version 1.7.1: https://codesandbox.io/s/react-checkbox-tree-example-forked-24iu3?file=/src/components/Widget.js

Expected behavior
The custom checkboxes should be hidden.

Solution
The problem was introduced with this PR: 6eec84f#diff-cec3d603b60b2c5f9b645161b2887ee58e4ae213ef0adb914ce48fc5965eb32cR149-R150

Previously, the appended & caused the style to be in correct order:

.rct-checkbox {
  .rct-native-display & {
    display: none;
  }
}

but it was refactored to

.rct-checkbox .rct-native-display {
  display: none;
}

which is exactly the opposite order. In order to solve this, simply swap the classes, as a rct-checkbox is a child of rct-native-display:

.rct-native-display .rct-checkbox {
  display: none;
}

Screenshots
image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions