fix: the checkbox in the `Table` header on IOS

[TahimiLeonBravo]

Actual Result

• the content inside the checkbox in the Table header is not rendered

Platform and Operating System:

• IOS version 12.4.3 - iPhone 6
• IOS version 13.2.3 - iPhone 8Plus

[TahimiLeonBravo]

Hi @yvmunayev You can go inside this issue :)

[oldMarcosVillacanas]

Hi! Could you please tell me how to reproduce this issue? I would like to contribute

[TahimiLeonBravo]

Hi! Could you please tell me how to reproduce this issue? I would like to contribute

Great!! You are welcome

[TahimiLeonBravo]

@MarcosVillacanas you can show more details here

Currently, only happen on "Safari" and "Chrome" on IOS

Steps to Reproduce

1. Go to the "Table" component https://react-rainbow.io/#!/Table/5
2. Select 3 row on the Table body

Current Behavior

The checkmark on the Table header is empty

Expected Behavior

• The checkmark on the Table header should render a minus "-" when not all rows are selected on the body
• The checkmark on the Table header should render a "✔️" when all rows are selected on the body

[oldMarcosVillacanas]

Thank you for the answer, I'm taking the issue :) I will let you know as soon as possible if I find any trouble

[TahimiLeonBravo]

Thank you for the answer, I'm taking the issue :) I will let you know as soon as possible if I find any trouble

Great!!!

[oldMarcosVillacanas]

Unfortunately, I am not able to keep working on this issue because I don't have all the required tools to deal with it. But I would like to share what I found out to help anyone interested in solving this.

-You don't need just an iPhone, you also need a Mac or iMac if you want to have the iOS web development tools, associated with xCode.

-The example Tahimi illustrated above can be found here: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Table/readme.md, It is the fifth table.

-At the time the table is created, here: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Table/index.js, there is a parameter set to the Table, called bulkSelection, which stores the value which triggers the bugged checkbox. This bulkSelection variable is set by default to none.

-The Table calls Head component: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Table/head/index.js, which uses Header: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Table/head/header.js, and finally selectableHeader: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Table/head/selectableHeader.js .

-bulkSelection var is passed to the constructor of each component, until selectableHeader, when finally depending on how many rows are selected, is turned to true, indeterminate, or false: -> const bulkStateMap = { all: true, some: 'indeterminate', none: false }; These three values represent the possible options of the checkbox (checked, unchecked or marked with a -)

I hope this helps. :)

[DanielOsunaV]

I'll check this issue to see how can I solve it if there's no problem.