search

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.9k stars 309 forks source link

data-hs-combo-box-output-item attribute hydration issues #382

Closed bluefire2121 closed 4 months ago

bluefire2121 commented 5 months ago

Summary

data-hs-combo-box-output-item attribute adds a style attribute to its element which causes hydration issues.

Steps to Reproduce

  1. Follow the basic example for combobox
  2. Hydration issues occur when used with SSR frameworks (Next / Remix) on the element with the data-hs-combo-box-output-item.
  3. Client contains style={{display: "block"}}. Server does not.

Demo Link

https://preline.co/docs/combobox.html

Expected Behavior

Actual Behavior

Screenshots

Screenshot 2024-06-02 171233

bluefire2121 commented 5 months ago

The work around is to add style={{display: 'block'}} to elements that contain the data-hs-combo-box-output-item attribute.

olegpix commented 5 months ago

Summary

data-hs-combo-box-output-item attribute adds a style attribute to its element which causes hydration issues.

Steps to Reproduce

  1. Follow the basic example for combobox
  2. Hydration issues occur when used with SSR frameworks (Next / Remix) on the element with the data-hs-combo-box-output-item.
  3. Client contains style={{display: "block"}}. Server does not.

Demo Link

https://preline.co/docs/combobox.html

Expected Behavior

  • No hydration errors.
  • Style attribute isn't added. Either use the Tailwindcss classhidden or remove style altogether.

Actual Behavior

  • Hydration issues occur

Screenshots

Screenshot 2024-06-02 171233

Hey @bluefire2121, Could you please provide a Stacklblitz demo? Please note, the demo link should not be our docs link. Thanks!