metrostar / comet Goto Github PK

Discussed in #75

Discussed in #74

Describe the bug
The DatePicker initializes every time the parent component renders, which adds partially visible calendar icon buttons.

To Reproduce
Create this component and add it to a comet-starter page (typing in input adds more icons):

function MyComponent() {
  const [myInput, setMyInput] = useState('');

  console.log(myInput);

  return (
    <div>
      <TextInput
        id="my-input"
        onChange={(e) => setMyInput(e.target.value)}
      ></TextInput>
      <DatePicker></DatePicker>
    </div>
  );
}

Expected behavior
The DatePicker is initialized once instead of on every component rerender.

Screenshots
Top edges of multiple calendar buttons:

Multiple usa-date-picker__wrapper divs:

Desktop (please complete the following information):

• OS: Manjaro Linux
• Browser Chromium
• Version 126.0.6478.126

Smartphone (please complete the following information):

• (Not tested on smartphone)

Additional context

• The re-initializing on every render might be due to the useLayoutEffect not having any dependencies:

  comet/packages/comet-uswds/src/components/date-picker/date-picker.tsx

  Line 68 in 338d5de

  });

• If a dependency list is added, though, it still renders twice from <React.StrictMode>.

Is your feature request related to a problem? Please describe.
Add the USWDS In-page Navigation component to the base library as a reusable React Component.

Describe the solution you'd like
The following component should be converted to a React component, as part of the base library: https://designsystem.digital.gov/components/in-page-navigation/.

Conversion of this component should include the following:

• Add new component (tsx)
• Add Storybook stories as needed (stories.tsx)
• Add Unit Tests to cover functionality (test.tsx)
• Add index.ts to export the component
• Add the component export to the default index.ts

Describe alternatives you've considered
N/A, this is a USWDS component

Additional context
The component should be implemented to make it as reusable and as extensible as possible.