react-date-range

react-date-range copied to clipboard

Subject of the issue

When user clicks on empty InputRange and starts typing, the first typed number is not being taken.

[BUG] Bug Reproduce Steps

When the InputRange text-input of e.g. "days up today" is empty by default (e.g. infinite symbol or "-"symbol) , when user clicks on the input and starts typing a number such as 8, it will jump to number 1 ( as well "days up today").

If user selects the contents of the input and then types, its instant showing the typed number in the input.

[BUG] Expected behaviour

When user clicks on empty InputRange and starts typing, the first typed number should be instant shown. Also it should not add number 1 to "days up today"

Environment

Package Version: 1.4.0 React version: 17.2 Node version: 16.13.0 Browser: Chrome

Workaround

useEffect(()=>{
        if(showDateRange) {
          var inputRange0 = document.getElementsByClassName("rdrInputRangeInput")[0];
          var inputRange1 = document.getElementsByClassName("rdrInputRangeInput")[1];
          inputRange0.addEventListener("click",()=>{
            inputRange0.select();
          });
          inputRange1.addEventListener("click",()=>{
            inputRange1.select();
          });

          inputRange0.addEventListener("keydown",(e)=>{
            if(e.keyCode == 8) {
              inputRange0.value = "";
            }
          });
          inputRange1.addEventListener("keydown",(e)=>{
            if(e.keyCode == 8) {
              inputRange1.value = "";
            }
          });
        }
      },[showDateRange]);

Workaround

useEffect(()=>{
        if(showDateRange) {
          var inputRange0 = document.getElementsByClassName("rdrInputRangeInput")[0];
          var inputRange1 = document.getElementsByClassName("rdrInputRangeInput")[1];
          inputRange0.addEventListener("click",()=>{
            inputRange0.select();
          });
          inputRange1.addEventListener("click",()=>{
            inputRange1.select();
          });

          inputRange0.addEventListener("keydown",(e)=>{
            if(e.keyCode == 8) {
              inputRange0.value = "";
            }
          });
          inputRange1.addEventListener("keydown",(e)=>{
            if(e.keyCode == 8) {
              inputRange1.value = "";
            }
          });
        }
      },[showDateRange]);

Awesome. Working fine