Can't typing on input and text area

[thanhnx9368]

Hi xwpongithub,

I have an issues with vue ranger slider. I have a page, it's using vue ranger slider and text area for user typing comment.

But when i implement your package. I can't typing anywhere on page and i can't reload with keyborads ( Command + R ).

Please to help me.

Thank you very much!!!

[santi755]

@thanhnx9368 I had the same issue. Try using this one: https://nightcatsama.github.io/vue-slider-component/#/api/props . Is exactly the same.

[thanhnx9368]

@thanhnx9368 I had the same issue. Try using this one: https://nightcatsama.github.io/vue-slider-component/#/api/props . Is exactly the same.

Thanks for your answers. It's helpful^^

[jasonkester]

This is essentially the same issue as #3, due to this component hijacking the events it needs across the entire document and cancelling them before deciding whether it actually wants to respond to them.

Here's a fixed "handleKeydown" method that can be dropped in place of the existing one (at around line 1345):

            handleKeydown: function handleKeydown(e)
            {
                console.log(this.useKeyboard);
                if (!this.useKeyboard)
                {
                    return true;
                }

                var keyCode = e.which || e.keyCode;

                switch (keyCode)
                {
                    case 37:
                    case 40:
                        this.keydownFlag = true;
                        this.flag = true;
                        this.changeFocusSlider(this.actionsKeyboard[0]);
                        break;

                    case 38:
                    case 39:
                        this.keydownFlag = true;
                        this.flag = true;
                        this.changeFocusSlider(this.actionsKeyboard[1]);
                        break;

                    default:
                        break;
                }

                if (this.keydownFlag)
                {
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                }
                return true;
            },

[mahmoudzohdi]

I have the same issue, and when I looked on the source code I found he prevent any key down/up on the document !!!!! really it looks like stupid 😠 it should prevent the key down/up (or any event) in his inputs only not on the document.

[Anoesj]

For now, you can fix this by pulling these quickfixes I made: #5

[Bereket-G]

It took me two days to find out that weird effect on my app is because of this library. Also they didn't accept the pull request for this issue.

I think its time to run npm uninstall vue-range-component

[rohandhiman222]

This is essentially the same issue as #3, due to this component hijacking the events it needs across the entire document and cancelling them before deciding whether it actually wants to respond to them.

Here's a fixed "handleKeydown" method that can be dropped in place of the existing one (at around line 1345):

          handleKeydown: function handleKeydown(e)
          {
              console.log(this.useKeyboard);
              if (!this.useKeyboard)
              {
                  return true;
              }

              var keyCode = e.which || e.keyCode;

              switch (keyCode)
              {
                  case 37:
                  case 40:
                      this.keydownFlag = true;
                      this.flag = true;
                      this.changeFocusSlider(this.actionsKeyboard[0]);
                      break;

                  case 38:
                  case 39:
                      this.keydownFlag = true;
                      this.flag = true;
                      this.changeFocusSlider(this.actionsKeyboard[1]);
                      break;

                  default:
                      break;
              }

              if (this.keydownFlag)
              {
                  e.preventDefault();
                  e.stopPropagation();
                  return false;
              }
              return true;
          },

Thanks for the solve the problem

[mrosminin]

hi, you slider is awesome, much better then vue-slider-component, but, please, fix this problem. @xwpongithub