bug: Inconsistent Modal Behaivor

[bfg-coding]

What version of daisyUI are you using?

v3.5.1

Describe your issue

I'm working on the Nextjs application for work. I've got 2 modals that display the same form the only different between them is one is for editing values one is for creating values. These modals use the new dialog element workflow suggested in v3 of Daisy. When I open the create modal everything works perfectly but the edit modals works perfectly until I hit the save button, the modal closes but does not run the save function as expected. I've been playing with this on and off for weeks and haven't figured out what's going on. I've stripped the project to just the required parts and still have the same bug

page component

import dynamic from "next/dynamic";

const GoalForm = dynamic(() => import("../components/GoalForm").then(mod => mod.GoalForm), {
  ssr: false,
});
const GoalRow = dynamic(() => import("../components/GoalRow").then(mod => mod.GoalRow), {
  ssr: false,
})

export default function Home() {
  const goals = [
      {
        id: 1,
        name: "Eat",
        description: "something",
        assignedDate: "2021-01-01",
        sortOrder: 1,
        completed: false
      },
      {
        id: 2,
        name: "Sleep",
        description: "something",
        assignedDate: "2021-01-01",
        sortOrder: 2,
        completed: false
      },
    {
      id: 3,
      name: "Play",
      description: "something",
      assignedDate: "2021-01-01",
      sortOrder: 3,
      completed: false
    }
  ]
  return (
    <main className="flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-4xl font-bold text-gray-900">Goal Tracker</h1>
      <GoalForm />
      {
        goals.map((goal) => {
          return <GoalRow key={goal.id} goal={goal} />
        })
      }
    </main>
  )
}

GoalForm component ( This is large cause I've consolidated all the components into a single file for testing purposes )

import {useEffect, useReducer} from "react";

interface GoalModalProps {
    id: string;
    buttonClass?: string;
    Button: () => React.ReactElement;
    children: React.ReactNode;
}

export const ButtonModal = ({ id, buttonClass, Button, children }: GoalModalProps) => {
    return (
        <>
            <button className={buttonClass || "btn"} onClick={() => window[id].showModal()}>
                <Button />
            </button>
            <dialog id={id} className="modal">
                <form method="dialog" className="modal-box">
                    <button formMethod="dialog" className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
                        X
                    </button>
                    {children}
                </form>
            </dialog>
        </>
    )
}

interface IconModalProps {
    id: string;
    children: React.ReactNode;
}

export const IconModal = ({ id, children }: IconModalProps) => {
    const showModal = () => {
        // @ts-ignore
        window[id].showModal();
    }

    return (
        <>
            <button onClick={showModal}>I</button>
            <dialog id={id} className="modal">
                <form method="dialog" className="modal-box">
                    <button formMethod="dialog" className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
                        X
                    </button>
                    {children}
                </form>
            </dialog>
        </>
    )
}


export const YearSelect = ({disabled, today, changeYear}) => {
    const years: number[] = [];

    for (let i= 0; i <= 2; i++) {
        years.push(today.getFullYear() + i);
    }

    return (
        <select
            onChange={e => changeYear(e.target.value)}
            defaultValue="Year"
            disabled={disabled}
            className="select max-w-xs">
            <option disabled>Year</option>
            {years.map(year => <option key={year} value={year}>{year}</option>)}
        </select>
    )
}

export const monthName = (id: string) => {
    const month = parseInt(id);
    if (!month) return "";
    switch (month) {
        case 1:
            return "January";
        case 2:
            return "February";
        case 3:
            return "March";
        case 4:
            return "April";
        case 5:
            return "May";
        case 6:
            return "June";
        case 7:
            return "July";
        case 8:
            return "August";
        case 9:
            return "September";
        case 10:
            return "October";
        case 11:
            return "November";
        case 12:
            return "December";
        default:
            return "";
    }
};

export const MonthSelect = ({disabled, today, changeMonth}) => {
    const months: number[] = [];

    for (let i = today.getMonth(); i < 12; i++) {
        months.push(i + 1);
    }

    return (
        <select
            onChange={(e) => {changeMonth(e.target.value)}}
            defaultValue="Month"
            disabled={disabled}
            className="select max-w-xs">
            <option disabled>Month</option>
            {months.map(month => <option key={month} value={month}>{monthName(`${month}`)}</option>)}
        </select>
    )
}

///////////////////////////////////////////////////////////////////////////////////////

const AddGoalButton = () => {
    return <>
        +
        <span>Add Goal</span>
    </>
}

const ModalWrapper = ({ type, children, id=null }) => {
    return type === "add" && !id
        ? <ButtonModal
            id="goal_modal"
            buttonClass="btn btn-primary"
            Button={AddGoalButton}>
            {children}
        </ButtonModal>
        : <IconModal id={`goal_edit_${id}`}>
            { children }
        </IconModal>

}

export const GoalForm = ({ goal=null }) => {
    const today = new Date();
    const type = goal ? "edit" : "add";

    const goalReducer = (state, action) => {
        switch(action.type) {
            case "default":
                return {
                    isSaved: false,
                    year: goal?.year || today.getFullYear(),
                    month: goal?.month || today.getMonth() + 1,
                    title: goal?.title || "",
                    description: goal?.description || "",
                    complete: false
                }
            case "title":
                return { ...state, title: action.value }
            case "description":
                return { ...state, description: action.value }
            case "isSaved":
                return { ...state, isSaved: !state.isSaved }
            case "month":
                return { ...state, month: action.value }
            case "year":
                return { ...state, year: action.value }
            default:
                console.error("action type was not recongized", action.type);
                return state;
        }
    }

    const [state, dispatch] = useReducer(goalReducer, {
        isSaved: false,
        year: goal?.year || today.getFullYear(),
        month: goal?.month || today.getMonth() + 1,
        title: goal?.title || "",
        description: goal?.description || "",
        complete: false
    });

    const save = (e) => {
        console.log("saving goal")
        e.preventDefault();
        // TODO: Add validation

        if (type === "add") {
            console.log("add");
        } else {
            console.log("update")
        }
    }

    const handleInput = (e) => {
        if (e.target.name === "title") {
            dispatch({ type: "title", value: e.target.value })
        } else if (e.target.name === "description") {
            dispatch({ type: "description", value: e.target.value })
        }
    }

    const changeMonth = (month: number) => {
        dispatch({ type: "month", value: month })
    }

    const changeYear = (year: number) => {
        dispatch({ type: "year", value: year });
    }

    useEffect(() => {
        return () => {
            dispatch({ type: "default" })
        }
    }, [])

    return (
        <ModalWrapper type={type} id={goal?.id}>
            <h1 className="text-xl font-bold border-b border-primary">Add Goal</h1>
            <div className="form-control w-full my-2">
                <label className="label">
                    <span className="label-text">Goal Complete Date</span>
                </label>
                <div className="join">
                    <input onClick={() => { dispatch({ type: "isSaved" } )}}
                           className="join-item btn"
                           checked={state.isSaved}
                           type="checkbox"
                           name="saved"
                           aria-label="Saved"
                    />
                    <YearSelect changeYear={changeYear} today={today} disabled={state.isSaved}/>
                    <MonthSelect changeMonth={changeMonth} today={today} disabled={state.isSaved}/>
                </div>
            </div>
            <div>
                <div className="form-control w-full max-w-xs my-2">
                    <label className="label">
                        <span className="label-text">Goal Title</span>
                    </label>
                    <input name="title"
                           className="input input-bordered w-full max-w-xs"
                           value={state.title}
                           onChange={handleInput}
                           type="text"
                           placeholder="Complete ____ certification"
                    />
                </div>
            </div>
            <div className="form-control my-2">
                <label className="label">
                    <span className="label-text">Goal Description</span>
                </label>
                <textarea name="description"
                          className="textarea textarea-bordered h-24"
                          value={state.description}
                          onChange={handleInput}
                          placeholder="I'm going to complete lastest certification"
                />
            </div>
            <div className="flex flex-row justify-between items-center my-5">
                <button formMethod="dialog" className="btn btn-outline btn-secondary">
                    Cancel
                </button>
                <div className="flex flex-row items-center gap-4">
                    <button onClick={() => {}} className="btn btn-outline btn-error">
                        Delete
                    </button>
                    <button onClick={save} className="btn btn-primary">
                        Save
                    </button>
                </div>
            </div>
        </ModalWrapper>
    )
}

Goal Row component

import {GoalForm} from "@/components/GoalForm";

export const GoalRow = ({ goal }) => {
    return (
        <div className="flex items-center bg-gray-100 rounded-lg w-full p-3 gap-3">
            <div className="flex w-1/5 gap-3">
                <h4>{goal.title}</h4>
            </div>
            <div className="flex flex-grow">
                <p>{goal.description}</p>
            </div>
            <div className="flex gap-3">
                <button>
                    <GoalForm goal={goal} />
                </button>
                <button>
                    save
                </button>
                <button>
                    copy
                </button>
                <button>
                    delete
                </button>
            </div>
        </div>
    )
}

What browsers are you seeing the problem on?

Chrome, Firefox

Reproduction URL

No response

[saadeghi]

I think your issue is with the HTML <dialog> element, not daisyUI.

If you disable daisyUI, you will see the same behavior. So it's not a daisyUI issue.
I'm going to move this to discussions.

My suggestion would be replacing

<form method="dialog" className="modal-box">

with a div, and put a <form method="dialog"> only around the close/cancel button.
This way all the form elements would be outside this form and no unexpected closing would happen.

You can then close the modal using JS to gain more control on everything.

Let me know if you have any questions.

[bfg-coding]

I'm pretty sure I tried this but I will double check and get back with you. Thanks for your suggestions

[bfg-coding]

I'll have to dig deeper into this. While in the edit mode the button isn't firing when clicked even when I switch to div Thanks for you time