The last step on our journey to v6 was implementing snippet completions. I encountered a couple of things on the way that were interesting to me, and I’m curious if they’re unique to our usage or more common.
The first observation was that it was practically instinctive for our testers to want to use the enter key to move between fields, especially if we had a default placeholder value in the field. Using a custom snippetKeymap() with an argument of:
//-----------------------------------------------------------------------------#
// Override the default snippet key map in order to deal with instinctive
// hitting of enter instead of tab to move between fields.
//-----------------------------------------------------------------------------#
export const SnippetKeyMap = [
{ key: "Tab", run: nextSnippetField, shift: prevSnippetField },
{ key: "Enter", run: nextSnippetField },
{ key: "Escape", run: clearSnippet }
];
Seems to have resolved this for us, but I’m curious if others encountered the same behavior or had a different solution.
The second observation was that when using the tab key to move between snippet fields, it was again instinctive for the test group to hit it again on the last field in the snippet, which moves the focus outside of the editor to whatever’s next in the tab order on the page. Solved this by simply appending a zero-width field, i.e., ${} to the end of each snippet to capture that tab-out from the last ‘real’ field and position the cursor at the end of the injected snippet, which seemed to make sense for those testing it. Again, this seems to work just fine, but I’m curious if there’s a better approach.