bohnacker / svelte-number-spinner Goto Github PK

Hey there, I'm using NumberSpinner in a modal with a bunch of other spinners. When I click anywhere that isn't the NumberSpinner, the modal snaps to every NumberSpinner element. When I remove stopEditing() from this line:

async function editBlurHandler(ev) {
    dispatch("consoleLog", ev.type);

    stopEditing();
  }

The problem is solved, and I see this block here contains the real problem:

// Bring focus back to the drag element if the body was clicked:
    setTimeout(() => {
      if (document.activeElement === document.body || document.activeElement === editElement) {
        dragElement.focus();
      }
    }, 0);

The problem is document.activeElement === document.body || . Since I've loaded in a modal (and you know there are 100 different techniques to load a modal) it seems the body is currently "focused." Are you sure you need this conditional? The component seems to work fine when I remove it.

I've made a REPL here: https://svelte.dev/repl/17aaa0076f9d406fa2760fe2d476d70b?version=3.31.2

Basically, hitting enter needs to capture and handle the event away from the form itself.

Because of separation of value, visibleValue and preciseValue, the visible value in the input field isn't correctly updated.

We had this at one point but then in a release:

With this version a number spinner has to be focussed with a first click and enter edit mode with the second click.

I know some work has been done since then and I'm wondering if it's possible to get this functionality back as an option. editOnSingleClick. In my case, a user raised a good point that they expected the box to be a traditional number spinner with the "added ability" to drag with the mouse.

So I just installed this to an existing project which builds without issue, until I install the spinner:

[!] (plugin terser) Error: Unexpected token: operator (?)
SyntaxError: Unexpected token: operator (?)
at Z.get (...\node_modules\terser\dist\bundle.min.js:1:463)
at reportError (...\node_modules\jest-worker\build\workers\processChild.js:107:11)
at reportClientError (...\node_modules\jest-worker\build\workers\processChild.js:87:10)
at execFunction (...\node_modules\jest-worker\build\workers\processChild.js:157:5)
at execHelper (...\node_modules\jest-worker\build\workers\processChild.js:139:5)
at execMethod (...\node_modules\jest-worker\build\workers\processChild.js:143:5)
at process. (...\node_modules\jest-worker\build\workers\processChild.js:64:7)
at process.emit (events.js:315:20)
at emit (internal/child_process.js:876:12)
at processTicksAndRejections (internal/process/task_queues.js:85:21)

I've uninstalled and rebuilt and the app builds fine again, then after installing the spinner it again fails to build.

Love the component, any idea why it's failing to build?

Given:

<svelte:window
  on:keydown={keydownHandler}
/>

It runs this:

    // prevent submitting if the number spinner is inside a form element
    if (ev.key == "Enter") {
      ev.preventDefault();
    }

Which unfortunately causes the user to be unable to hit enter anywhere else on the page. In my case it's in an RTE, and I can confirm that commenting this this conditional out fixes the problem. 👍

I wonder if it could be made more specific to the element itself somehow, or if there just needs to be a flag property added on NumberSpinner.

Thanks again for this amazing lib! It's been very well received by my users.

Right now, edit mode starts when clicking on the number spinner without dragging or when pressing the enter key. Maybe it won't hurt to start editing by pressing numbers or any key.

We have onChange and input, but no keypress: my use case is that I want to perform an action when the user presses the Enter key.

Hello, excellent work on this component! I know you have specifically said this is a mouse or keyboard component, but I figured I'd make the issue and see if you had any thoughts (or hacks) on how to get it to work.

Device: Android, Samsung S10 Edge
Browser: Chrome or Firefox

The editOnClick option simply does not activate on mobile. No amount of clicking or double-clicking, even with editOnClick false or true, will result in the box being editable.

Otherwise everything works as expected!