Summary

Fixed initialization issues for dynamically rendered, enhanced components. Fixed Time Picker, File Input, Range, Date Picker, and Character Count init methods to prevent re-enhancement while updating all enhanced component stories.

Breaking change

This is not a breaking change.

Related issue

Closes #6663

Related pull requests

None

Preview link

Preview link:
Not available

Problem statement

The USWDS Storybook app doesn't initialize enhanced components when the story renders.
Some of the consequences:

--ComboBox renders like a select component.
--Accordions render with all of the accordions open.
--DatePicker and DateRangePicker don't have the calendar to interact with.
--Header renders with nav items open.
--CharacterCount is static, with no soft failure state, and no feedback on remaining characters.
--TimePicker is just an empty text input.
--FileInput styling is missing.

While solving the problem above, I found that the init methods of Time Picker, File Input, Range, Date Picker, and Character Count could be repeatedly enhanced, which results in unpredictable rendering behavior.

Solution

1. Enhanced components need to be initialized after mount in order to render/function properly.
   -- Each enhanced component story has been updated with an initialization decorator.
2. Time Picker, File Input, and Range weren't initializing properly because they didn't prevent re-enhancement.
   -- They are now marked during the first init() pass to prevent this. The appropriate element is marked with a data-enhanced attribute after enhancement. At the start of enhancement, the appropriate element is checked for a truthy data-enhanced attribute.
   -- This solution was chosen because it's the same way ComboBox prevents re-enhancement.

Major changes

Minor (IMO)

Testing and review

Clone the repo, checkout this branch, execute npm install && npm start.
Manipulate and visually inspect the components affected by this PR.

Here are screenshots to show it's resolved:

ComboBox:

Accordions:

DatePicker:

DateRangePicker:

Header:

CharacterCount:

TimePicker:

FileInput: