Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

goto keepfocus not working in v1.0.0-next.196 #2853

Closed
m4rch3n1ng opened this issue Nov 21, 2021 · 1 comment · Fixed by #2857
Closed

goto keepfocus not working in v1.0.0-next.196 #2853

m4rch3n1ng opened this issue Nov 21, 2021 · 1 comment · Fixed by #2857
Labels
bug Something isn't working p2-nice-to-have SvelteKit cannot be used by a small number of people, quality of life improvements, etc. router

Comments

@m4rch3n1ng
Copy link

m4rch3n1ng commented Nov 21, 2021

Describe the bug

the focus is not kept on the input when binding input value to a URLSearchParams object and using goto with { keepfocus: true } to navigate

bug started when switching from version 1.0.0-next.195 to 1.0.0-next.196

Reproduction

1. initialise new svelte-kit skeleton project via $ npm init svelte@next

2. update package.json so it reads "@sveltejs/kit": "1.0.0-next.195"

3. install dependencies using $ npm install

4. go to src/routes/index.svelte and replace code with

<script>
  import { goto } from "$app/navigation";
  import { page } from "$app/stores";

  function toObject(params) {
    const obj = {};
    for (const key of params.keys()) {
      obj[key] = params.get(key);
    }
    return obj;
  }

  function queryStore(prop) {
    let query = {};
    return {
      subscribe(callback) {
        return page.subscribe((page) => {
          query = toObject(page.query);
          callback(query[prop]);
        })
      },
      set(value) {
        if (value) {
          query[prop] = value;
        } else {
          delete query[prop];
        }

        const searchParams = new URLSearchParams(query);
        const to = [ ...searchParams.keys() ].length ? `?${searchParams.toString()}` : "./";
        goto(to, { keepfocus: true, replaceState: true, noscroll: true });
      }
    }
  }

  const query = queryStore("name");
</script>


<input bind:value={$query} type="text" />

5. start development server using $ npm run dev

6. navigate to http://localhost:3000 and input a value into the <input /> field and observe how the url changes, while the focus is kept on the input

7. stop the development server

8. update the "@sveltejs/kit" version to 1.0.0-next.196 and run $ npm install again

9. repeat steps (5.) and (6.) and observe how the input is not kept in focus

(i could provide a video or repository on this particular bug if you preferred)

Logs

no response

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
    Memory: 6.59 GB / 15.93 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - ~\.yarn\bin\yarn.CMD
    npm: 8.1.2 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.29)
  npmPackages:
    @sveltejs/kit: 1.0.0-next.196 => 1.0.0-next.196
    svelte: ^3.42.6 => 3.44.2

Severity

blocking an upgrade

Additional Information

no additional information

@bluwy
Copy link
Member

bluwy commented Nov 22, 2021

This is likely caused by #2755. Perhaps we should only not unselect text selection when keepfocus is true too

@bluwy bluwy added bug Something isn't working p2-nice-to-have SvelteKit cannot be used by a small number of people, quality of life improvements, etc. router labels Nov 22, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working p2-nice-to-have SvelteKit cannot be used by a small number of people, quality of life improvements, etc. router
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants