SolidJS•5d ago

weird history/url derived state behavior when using mouse back button

kind of a weird issue. basically i have a modal/dialog for which i derive open/close state from the url as the source the general idea is in a hook i grab the search params, and then return a memo'd state method that parses the params and returns whether or not the dialog is open based on that. then some open/close methods too. it was seemingly working really nicely and i thought was an elegant solution, ux and dx. however, i'm noticing that the back button i have on my mouse, when trying to go back to closed state, does not work. the modal closes on button down, and then comes back on button up. i have know idea what event is even happening when this happens. it might just be some weird behavior w/ my mouse/computer, but i thought it's a good excuse to ask for a review on my hook for the dialog state. if someone could let me know if something looks clearly broken, it would be greatly appreciated

function useDialogState() {
  const [searchParams, setSearchParams] = useSearchParams<{
    action?: 'new-transaction';
  }>();

  const state = createMemo<DialogState>(() =>
    searchParams.action === 'new-transaction' ? 'open' : 'closed',
  );

  const open = () => {
    setSearchParams({ action: 'new-transaction' });
  };

  const close = (onClose?: () => void) => {
    onClose?.();
    setSearchParams({ ...searchParams, action: undefined });
  };

  const toggle = () => {
    (state() === 'open' ? close : open)();
  };

  const context = {
    state,
    open,
    close,
    toggle,
  };

  return context;
}

function useDialogState() {
  const [searchParams, setSearchParams] = useSearchParams<{
    action?: 'new-transaction';
  }>();

  const state = createMemo<DialogState>(() =>
    searchParams.action === 'new-transaction' ? 'open' : 'closed',
  );

  const open = () => {
    setSearchParams({ action: 'new-transaction' });
  };

  const close = (onClose?: () => void) => {
    onClose?.();
    setSearchParams({ ...searchParams, action: undefined });
  };

  const toggle = () => {
    (state() === 'open' ? close : open)();
  };

  const context = {
    state,
    open,
    close,
    toggle,
  };

  return context;
}

1 Reply

jackOP•5d ago

ok update: i've realized that it does work when unfocus the input i'm focused on when pressing the back button... strange

Gaming

Programming

weird history/url derived state behavior when using mouse back button