cascading-select.tsx

import { type Remix } from "@remix-run/dom"
import { dom } from "@remix-run/events"
import { STATES } from "./lib/states.ts"

export function App(this: Remix.Handle) {
  let fetchState: "idle" | "loading" | "loaded" = "idle"
  let cities: string[] = []

  return () => (
    <form
      css={{
        margin: "24px",
        display: "flex",
        gap: "16px",
        "& label": {
          display: "block",
          marginBottom: "4px",
        },
      }}
    >
      <div>
        <label for="state">State</label>
        <select
          id="state"
          on={dom.change(async (event, signal) => {
            fetchState = "loading"
            this.update()

            let response = await fetch(
              `/api/data?state=${event.currentTarget.value}`,
              { signal }
            )
            cities = await response.json()

            fetchState = "loaded"
            this.update()
          })}
        >
          <option value="">Select a state...</option>
          {STATES.map((state) => (
            <option value={state.id}>{state.name}</option>
          ))}
        </select>
      </div>
      <div>
        <label for="city">City</label>
        <select
          id="city"
          disabled={fetchState !== "loaded"}
        >
          {fetchState === "idle" ? (
            <option value="">Select a state...</option>
          ) : fetchState === "loading" ? (
            <option value="">Loading...</option>
          ) : (
            cities.map((city) => (
              <option value={city}>{city}</option>
            ))
          )}
        </select>
      </div>
    </form>
  )
}