Does not work with astro3 ViewTransitions

[theslantedroom]

In astro3 with ViewTransitions enabled, and the React integrations, this components css is lost every time a viewTransition fires. So whenever you navigate.

https://docs.astro.build/en/guides/view-transitions/

https://docs.astro.build/en/guides/integrations-guide/react/

https://github.com/JedWatson/react-select/assets/73557008/c9b138b2-48ca-4246-bd97-d7c09f75f055

import { useState } from "react";
import { themeColors } from "../../../theme/themeColors";
import Select, { type StylesConfig } from "react-select";

interface DawOption {
  readonly value: string;
  readonly label: string;
  readonly isDisabled?: boolean;
}
export const DawDropDown = () => {
  const colorStyles: StylesConfig<DawOption> = {
    control: (styles) => ({
      ...styles,
      backgroundColor: "white",
      minWidth: "140px",
    }),
    option: (styles, { isDisabled, isFocused, isSelected }) => {
      const bgColor = isSelected
        ? themeColors.accentHilite
        : isFocused
        ? themeColors.darkenedText // on hover
        : undefined;
      if (isDisabled)
        return {
          ...styles,
          backgroundColor: "white",
          color: themeColors.darkenedText,
          cursor: "not-allowed",
        };

      return {
        ...styles,
        backgroundColor: bgColor,
        color: isSelected ? themeColors.text : themeColors.mainBackground,
        cursor: "default",

        ":active": {
          ...styles[":active"],
          backgroundColor: isSelected
            ? themeColors.mainBackground
            : themeColors.text,
        },
      };
    },
    input: (styles) => ({ ...styles }),
    placeholder: (styles) => ({ ...styles }),
    singleValue: (styles, { data }) => ({ ...styles }),
  };

  const [selectedOption, setSelectedOption] = useState<any>(null);
  if (selectedOption) console.log(selectedOption);
  const dawOptions: readonly DawOption[] = [
    {
      value: "Select DAW",
      label: "Select DAW",
      isDisabled: true,
    },
    {
      value: "ProTools",
      label: "ProTools",
    },
    {
      value: "Ableton",
      label: "Ableton",
    },
    {
      value: "Reaper",
      label: "Reaper",
    },
    {
      value: "Logic",
      label: "Logic",
    },
    {
      value: "Cubase",
      label: "Cubase",
    },
    {
      value: "FL Studio",
      label: "FL Studio",
    },
  ];
  return (
    <Select
      defaultValue={dawOptions[0]}
      options={dawOptions}
      onChange={setSelectedOption}
      styles={colorStyles}
    />
  );
};

[glib-0]

I have the same issue with ViewTransitions in Astro v4.5 and react-select v5.8. Tried every other workaround I could find to make it hydrate properly, but was still having problems with back navigation.

For anyone who encounters this in the future, I fixed it using the data-astro-reload attribute on links to pages containing the Select components in combination with this crude script in my Astro layout to detect and reload those pages

---
const path = Astro.url.pathname
---

<script is:inline define:vars={{path}}>
const listOfPaths = [...];
document.addEventListener("astro:after-swap",()=>{
  if (listOfPaths.includes(path)){ 
    history.go(0);
  }
})
</script>

[glib-0]

Having written that out, I now realise that the script has made the data-astro-reload attribute redundant 🤦‍♂️