SSR Support for Select component

[BierDav]

Hello, I'm a student and we really need ssr support for this specific component in our project. I tried to do it my self but failed due to the harsh complexity, but @juanrgm as an experienced solid js developer should be able to pull this off. To get this fixed, I even sponsored 🙂

Just a quick overview of challenges I faced while trying to implementing this:

• Because of how MUI is set up, we would need to render all menu items to know which even exist. Now there are two ways to go on. Either introduce a new prop that allows passing possible values in advance or also prerender the menu (when you already have to render it to know the available values we also can use it in the ssr result)
• I wasn't sure if a pr would be approved when I introduce such a prop so I tried to go for the second option. But there is a big problem with prerendering, because the Portal component is only available on the client side and not on the server side, so we have to render all those dialogs inplace (which is technically possible)
• But unfortunately from the first ssr error I come to the next. And even though I have nearly eight years of experience with software development, after 2 weeks struggling I still don't understand what solid start is doing under the hood.

I would really appreciate any help, feedback or advice 💖

[BierDav]

Hello guys! There is an update on this topic from my side. I have been working on a version of that component on my own to support SSR and dynamic ranges. You can check it out here 🤓 Unfortunately, it currently doesn't support autofocus. I don't think it is a big technical issue, but the first attempt I gave it didn't work and I don't have enough time to fix that, because for us it is good enough. Also, the API is a bit different to MUI, but feels quite similar other than solid-select which might seam quite limiting. 😉

Have a nice day! 👋 BierDav

[YannickFuereder]

Another option would be to just import the Select Component on the client side only

Example:

import { Box, FormControl, InputLabel, MenuItem } from "@suid/material";
import { createSignal } from "solid-js";
import { clientOnly } from 'solid-start/islands';

const Select = clientOnly(() => import('@suid/material/Select'));

export default function StateSelect() {
  const [age, setAge] = createSignal("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age()}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

[BierDav]

Yeah, but with that we don't support ssr and instead disable it