Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug]: TableHeader spreading `...rest` on wrong inner element

See original GitHub issue

Package

carbon-components-react

Browser

No response

Package version

7.48.0

Description

In our code, we had a A11y issue (https://www.w3.org/TR/WCAG20-TECHS/H43) and wanted to make use of the expandHeaderto help fix this. Going off examples online, I was trying to set the id of the th of our table (in thiscase it would be generated via the TableHeader component, and so I noticed the source code it has a …rest prop to pass in any props not explicitly defined. But in our code,. I noticed, only our table headers that were NOT sortable had the id set, but table headers that were sortable did not. Looking at the source code in the TableHeader, I noticed this line set the ...rest in the th for columns that are not sortable so that is why the id is getting set

https://github.com/carbon-design-system/carbon/blob/56cec535e90108731e5a6bb1e20975e4ddd3d1fe/packages/react/src/components/DataTable/TableHeader.js#L74

However, I noticed for the columns that are sortable, the th, does not include the ...rest , However, I did notice the inner button component DOES include the ...rest, which makes me thing it was misplaced/typo

https://github.com/carbon-design-system/carbon/blob/56cec535e90108731e5a6bb1e20975e4ddd3d1fe/packages/react/src/components/DataTable/TableHeader.js#L116

So I think this is a bug, (also attached photo to also help)

P.S. I do not mind creating a PR for this fix, I just wish to verify this is a bug first 😃

CodeSandbox example

N/A

Steps to reproduce

I can’t reproduce, but provided sources above

Code of Conduct

I agree to follow this project’s Code of Conduct
I checked the current issues for duplicate problems

Issue Analytics

State:
Created 2 years ago
Comments:7 (7 by maintainers)

Top GitHub Comments

1reaction

TannerScommented, Dec 2, 2021

@joshblack yeah let’s go for it.

@TannerS That would be awesome of you to contribute a fix! 🏅 Let me know if I can help.

@tay1orjones hope this helps, I added a prop and tested it by using it ina few story book examples which I verified in the inspect tool in the browser

https://github.com/carbon-design-system/carbon/pull/10214

1reaction

joshblackcommented, Dec 1, 2021

Yeah definitely, we can make it so that the id prop is consistently placed on the outer <th> element 👍 What do you think @tay1orjones?