This closes Issue #5. The aim of this issue was to fix some CSS styling that highlights the currently selected tab. This was previously working and broke without notice when making further updates (hint, you need to start writing basic rendering tests soon).
A couple issues were going on but the result fixed more than I had aimed for. The main issue is that I was comparing a string (from the config file) and an integer (from the map) using strict equality to determine the currently selected tab. Explicitly coercing the string to an integer before comparison fixed the issue and has sparked an interest in reconsidering TypeScript to help ensure props are received as expected.
I was also able to determine that the the horizontal option icon added to the currently selected tab was causing an error because it didn't have the data-index attribute that the tab contains. I had a convo with CoPilot and it was recommended to use the event.target.closest() function which takes in a string for a parent element you are searching for, in my case 'li[data-index]' and returns that element if found.
Finally, I made sure the fade animations don't trigger if you click on the same tab more than once consecutively.
Changes
Removed reference to an unused stylesheet.
updateGroupIndex now ensures the new index differs before updating.
GroupTabs coerces the config.groupIndex value to an integer before comparison.
handleClick for GroupTab now searches for the closest li containing a data-index attribute in its ancestry.
Summary
This closes Issue #5. The aim of this issue was to fix some CSS styling that highlights the currently selected tab. This was previously working and broke without notice when making further updates (hint, you need to start writing basic rendering tests soon).
A couple issues were going on but the result fixed more than I had aimed for. The main issue is that I was comparing a string (from the config file) and an integer (from the map) using strict equality to determine the currently selected tab. Explicitly coercing the string to an integer before comparison fixed the issue and has sparked an interest in reconsidering TypeScript to help ensure props are received as expected.
I was also able to determine that the the horizontal option icon added to the currently selected tab was causing an error because it didn't have the
data-indexattribute that the tab contains. I had a convo with CoPilot and it was recommended to use theevent.target.closest()function which takes in a string for a parent element you are searching for, in my case'li[data-index]'and returns that element if found.Finally, I made sure the fade animations don't trigger if you click on the same tab more than once consecutively.
Changes
updateGroupIndexnow ensures the new index differs before updating.GroupTabscoerces theconfig.groupIndexvalue to an integer before comparison.handleClickforGroupTabnow searches for the closestlicontaining adata-indexattribute in its ancestry.