Unexpected Behaviour On Snippets, When Moving Cursor Using <Tab>

[atpur-rafif]

When we're using snippets autocompletion with multiple placeholder, and key are used to move between placeholder as expected on codemirror demo website

Link

While in @uiw/react-codemirror, unexpected behaviour happen. Instead move to next placeholder, key will add '\t' to start of the line.

Link

Extension used in codemirror website (src):

  extensions: [
    basicSetup,
    javascript(),
    javascriptLanguage.data.of({autocomplete: jsCompletion})
  ]

[jaywcjlove]

https://codesandbox.io/embed/react-codemirror-example-codemirror-6-https-github-com-uiwjs-react-codemirror-issues-363-fvq0tl?fontsize=14&hidenavigation=1&theme=dark

@JustIdentity I did not reproduce your problem.

I'm not sure if I understand wrong.

[atpur-rafif]

I guess you were right, the real reason why I did submit this issue is because I want to make custom snippet like this. And working as expected. (I am still not sure why on this website doesn't work as expected on my computer)

In the meantime, if you have spare time. Can you check where I did wrong?

Result:

[jaywcjlove]

I preview your example, is the expected behavior.

Is it a browser compatibility issue?

@JustIdentity

[atpur-rafif]

Found out the problem, the reason why it's resetting is because I use setter. So the whole element re-rendered. And probably that's the reason why the website didn't work (Code).

[jaywcjlove]

import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { snippetCompletion } from "@codemirror/autocomplete";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";

export default function App() {
  return (
    <div>
      <CodeMirror
        value="console.log('hello world!');"
        height="200px"
        extensions={[
          markdown(),
          markdownLanguage.data.of({
            autocomplete: [
              snippetCompletion("hello(${1}, ${2}) ${}", { label: "hello" })
            ]
          })
        ]}
        onChange={(value, viewUpdate) => {
          console.log("value:", value);
        }}
      />
    </div>
  );
}

[atpur-rafif]

I think I will refactor CodeMirror Element, so it won't re-render every time the value change. Btw, thanks for the hardwork