[Bug?]: .pending not updating on submit of Form

[semiautomatix]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Given the code below, the pending spinner and error message are never shown.

import { createServerAction$, redirect } from "solid-start/server";
import { client } from "~/utils/graphql-client";
import { insertProductsUomMutation } from "./queries";
import { Show } from "solid-js";
import { FormError } from "solid-start";

export default function ProductUomForm() {
  const [mutating, { Form }] = createServerAction$(
    // this is the request from the front end
    async (form: FormData, { request }) => {
      const uom_desc = form.get("uom_desc") as string;
      throw new FormError("unknown");
      // await client.mutation(insertProductsUomMutation, { uom_desc });
      // return redirect("/dashboard/products/uoms");
    }
  );

  return (
    <Form>
      {/* Comment Form */}
      <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        <Show when={mutating.error}>
          <p role="alert" id="error-message">
            Error: {mutating.error.message}
          </p>
        </Show>
        <div class="mx-auto max-w-2xl">
          <div class="text-center">
            <h2 class="text-xl text-gray-800 font-bold sm:text-3xl dark:text-white">
              Add a unit of measure
            </h2>
          </div>

          {/* Card */}
          <div class="mt-5 p-4 relative z-10 bg-white border rounded-xl sm:mt-10 md:p-10 dark:bg-gray-800 dark:border-gray-700">
            <form>
              <div class="mb-4 sm:mb-8">
                <label
                  for="hs-feedback-post-comment-name-1"
                  class="block mb-2 text-sm font-medium dark:text-white"
                >
                  Description
                </label>
                <input
                  type="text"
                  name="uom_desc"
                  id="hs-uom-desc"
                  class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 sm:p-4 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
                  placeholder="each"
                  required
                />
              </div>

              <div class="mt-6 grid">
                <button
                  type="submit"
                  class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all dark:focus:ring-offset-gray-800"
                >
                  {/* TODO: this doesn't seem to be working */}
                  <Show when={mutating.pending}>
                    <span
                      class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full"
                      role="status"
                      aria-label="loading"
                    ></span>
                  </Show>
                  Submit
                </button>
              </div>
            </form>
          </div>
          {/* End Card */}
        </div>
      </div>
      {/* End Comment Form */}
    </Form>
  );
}

Expected behavior 🤔

Basically, the page, on submit, should display an error after setting the spinner on the button.

Steps to reproduce 🕹

Steps:

1. Using the code provided, click submit

Context 🔦

Feedback from forms is impossible.

Your environment 🌎

System:
  OS: Ubuntu 22.04.3 LTS

Binaries:
  Node: 18.18.1
  pnpm: 8.9.0

npmPackacges:
    "@solidjs/meta": "^0.28.6",
    "@solidjs/router": "^0.8.3",
    "@urql/core": "^4.1.4",
    "graphql": "^16.8.1",
    "preline": "^1.9.0",
    "solid-js": "^1.8.3",
    "solid-start": "^0.3.7",
    "solid-start-netlify": "^0.3.7"

[semiautomatix]

Ok, issue is isolated to the pending status.

Does this work with the Progressively Enhanced Form?

[ryansolid]

Without capital <Form> it does a full page reload which means pending state could never be seen from the client.

[semiautomatix]

Without capital <Form> it does a full page reload which means pending state could never be seen from the client.

Ah @ryansolid, I see what I've managed to do. I've tried to combine two different sets of code and have succeeded in getting neither right!

Thanks so much for replying, and all the effort you've put into an incredible framework.

[semiautomatix]

Without capital <Form> it does a full page reload which means pending state could never be seen from the client.

Package update + rebuild+ clearing the cache seems to be working. Cheers!

I've switched up to this code, which I hope is now correct. The page appears to be reloading, and I'm still unable to get the pending status:

import { createServerAction$, redirect } from "solid-start/server";
import { client } from "~/utils/graphql-client";
import { insertProductsUomMutation } from "./queries";
import { Show } from "solid-js";
import { FormError } from "solid-start";

// https://github.com/niliadu/solid-js-form
export default function ProductUomForm() {
  const [mutating, { Form }] = createServerAction$(
    // this is the request from the front end
    async (form: FormData, { request }) => {
      const uom_desc = form.get("uom_desc") as string;
      throw new FormError("unknown error");
      // await client.mutation(insertProductsUomMutation, { uom_desc });
      // return redirect("/dashboard/products/uoms");
    }
  );

  console.log("pending", mutating.pending);

  return (
    <>
      {/* Comment Form */}
      <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        <Show when={mutating.error}>
          <p role="alert" id="error-message">
            Error: {mutating.error.message}
          </p>
        </Show>
        <div class="mx-auto max-w-2xl">
          <div class="text-center">
            <h2 class="text-xl text-gray-800 font-bold sm:text-3xl dark:text-white">
              Add a unit of measure
            </h2>
          </div>

          {/* Card */}
          <div class="mt-5 p-4 relative z-10 bg-white border rounded-xl sm:mt-10 md:p-10 dark:bg-gray-800 dark:border-gray-700">
            <Form>
              <div class="mb-4 sm:mb-8">
                <label
                  for="hs-feedback-post-comment-name-1"
                  class="block mb-2 text-sm font-medium dark:text-white"
                >
                  Description
                </label>
                <input
                  type="text"
                  name="uom_desc"
                  id="hs-uom-desc"
                  class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 sm:p-4 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
                  placeholder="each"
                  required
                />
              </div>

              <div class="mt-6 grid">
                <button
                  type="submit"
                  class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all dark:focus:ring-offset-gray-800"
                   disabled={mutating.pending}
                >
                  {/* TODO: this doesn't seem to be working */}
                  <Show when={mutating.pending}>
                    <span
                      class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full"
                      role="status"
                      aria-label="loading"
                    ></span>
                  </Show>
                  Submit
                </button>
              </div>
            </Form>
          </div>
          {/* End Card */}
        </div>
      </div>
      {/* End Comment Form */}
    </>
  );
}

Console logs:

POST http://localhost:3000/_m/src/routes/dashboard/products/uoms/form.tsx/0/mutating
GET http://localhost:3000/dashboard/products/uoms/form?form=%7B%22url%22%3A%22%2F_m%2Fsrc%2Froutes%2Fdashboard%2Fproducts%2Fuoms%2Fform.tsx%2F0%2Fmutating%22%2C%22entries%22%3A%5B%5B%22uom_desc%22%2C%22ttttt%22%5D%5D%2C%22error%22%3A%7B%22message%22%3A%22shsihsi%22%2C%22stack%22%3A%22The%20stack%20for%20FormErrors%20are%20only%20logged%20during%20development.%20In%20production%20you%20should%20handle%20these%20errors%20with%20an%20ErrorBoundary%20that%20can%20display%20the%20error%20message%20appropriately%20to%20the%20user.%5Cn%5CnFormError%3A%20shsihsi%5Cn%20%20%20%20at%20Object.%24%24serverHandler0%20(%2Fworkspace%2Fsolidstart-netlify%2Fsrc%2Froutes%2Fdashboard%2Fproducts%2Fuoms%2Fform.tsx%3A44%3A9)%5Cn%20%20%20%20at%20execute%20(%2Fworkspace%2Fsolidstart-netlify%2Fnode_modules%2F.pnpm%2Fsolid-start%400.3.7_%40solidjs%2Bmeta%400.28.6_%40solidjs%2Brouter%400.8.3_solid-js%401.8.3_solid-start-netli_bpsp2xn2i2ojyzzv2edztvll7q%2Fnode_modules%2Fsolid-start%2Fserver%2Fserver-functions%2Fserver.ts%3A189%3A37)%5Cn%20%20%20%20at%20Object.fn%20(%2Fworkspace%2Fsolidstart-netlify%2Fnode_modules%2F.pnpm%2Fsolid-start%400.3.7_%40solidjs%2Bmeta%400.28.6_%40solidjs%2Brouter%400.8.3_solid-js%401.8.3_solid-start-netli_bpsp2xn2i2ojyzzv2edztvll7q%2Fnode_modules%2Fsolid-start%2Fserver%2Fserver-functions%2Fserver.ts%3A201%3A12)%5Cn%20%20%20%20at%20Module.handleServerRequest%20(%2Fworkspace%2Fsolidstart-netlify%2Fnode_modules%2F.pnpm%2Fsolid-start%400.3.7_%40solidjs%2Bmeta%400.28.6_%40solidjs%2Brouter%400.8.3_solid-js%401.8.3_solid-start-netli_bpsp2xn2i2ojyzzv2edztvll7q%2Fnode_modules%2Fsolid-start%2Fserver%2Fserver-functions%2Fserver.ts%3A164%3A34)%5Cn%20%20%20%20at%20process.processTicksAndRejections%20(node%3Ainternal%2Fprocess%2Ftask_queues%3A95%3A5)%5Cn%20%20%20%20at%20async%20eval%20(%2Fworkspace%2Fsolidstart-netlify%2Fnode_modules%2F.pnpm%2Fsolid-start%400.3.7_%40solidjs%2Bmeta%400.28.6_%40solidjs%2Brouter%400.8.3_solid-js%401.8.3_solid-start-netli_bpsp2xn2i2ojyzzv2edztvll7q%2Fnode_modules%2Fsolid-start%2Fserver%2Fmiddleware.ts%3A39%3A30)%5Cn%20%20%20%20at%20async%20eval%20(%2Fworkspace%2Fsolidstart-netlify%2Fnode_modules%2F.pnpm%2Fsolid-start%400.3.7_%40solidjs%2Bmeta%400.28.6_%40solidjs%2Brouter%400.8.3_solid-js%401.8.3_solid-start-netli_bpsp2xn2i2ojyzzv2edztvll7q%2Fnode_modules%2Fsolid-start%2Fapi%2Fmiddleware.ts%3A40%3A12)%5Cn%20%20%20%20at%20async%20eval%20(%2Fworkspace%2Fsolidstart-netlify%2Fnode_modules%2F.pnpm%2Fsolid-start%400.3.7_%40solidjs%2Bmeta%400.28.6_%40solidjs%2Brouter%400.8.3_solid-js%401.8.3_solid-start-netli_bpsp2xn2i2ojyzzv2edztvll7q%2Fnode_modules%2Fsolid-start%2Fentry-server%2FStartServer.tsx%3A45%3A12)%5Cn%20%20%20%20at%20async%20devFetch%20(file%3A%2F%2F%2Fworkspace%2Fsolidstart-netlify%2Fnode_modules%2F.pnpm%2Fsolid-start%400.3.7_%40solidjs%2Bmeta%400.28.6_%40solidjs%2Brouter%400.8.3_solid-js%401.8.3_solid-start-netli_bpsp2xn2i2ojyzzv2edztvll7q%2Fnode_modules%2Fsolid-start%2Fdev%2Fserver.js%3A111%3A12)%5Cn%20%20%20%20at%20async%20startHandler%20(file%3A%2F%2F%2Fworkspace%2Fsolidstart-netlify%2Fnode_modules%2F.pnpm%2Fsolid-start%400.3.7_%40solidjs%2Bmeta%400.28.6_%40solidjs%2Brouter%400.8.3_solid-js%401.8.3_solid-start-netli_bpsp2xn2i2ojyzzv2edztvll7q%2Fnode_modules%2Fsolid-start%2Fdev%2Fserver.js%3A134%3A20)%22%2C%22formError%22%3A%22shsihsi%22%2C%22fields%22%3A%7B%7D%2C%22fieldErrors%22%3A%7B%7D%7D%7D

[semiautomatix]

Updated packages and changed <form> --> <Form> has resolved all issues.