Курсор перемещается в конец ввода, когда всплывающая подсказка реагирует - PullRequest
Новая
       33

Курсор перемещается в конец ввода, когда всплывающая подсказка реагирует

1 голос
/ 12 февраля 2020

Я пытаюсь создать поле ввода, где оно принимает время в качестве ввода. Вот мой код 

      <InputMask
          mask="99:99"
          onBlur={handleOnBlur}
          onChange={(e) => {
            const text = e.target.value
            setInputValue(text)
            setValueValid(true)
            const fixedText = text.replace(/:/g, '')
            if (onChange) {
              onChange({
                ...e,
                target: {
                  ...e.target,
                  value: fixedText,
                },
              })
            }
          }}
          //value={inputValue}
          {...rest}
      >
        {(inputProps) => (
          <Tooltip              
              open={!valueValid}
              placement="bottom-start"
              title="Ops Wrong Time Format!"
          >
            <StyledInput
                {...inputProps}
                autoFocus={rest.autoFocus}
                className={rest.className}
                onKeyDown={(e) => {
                  if (e.keyCode === 13) {
                    checkTimeFormat(inputValue)
                    if (valueValid) {
                      if (rest.onBlur) rest.onBlur(e)

                      e.target.blur()
                      if (onSubmit) {
                        const fixedText = inputValue.replace(/:/g, '')
                        onSubmit({
                          ...e,
                          target: {
                            ...e.target,
                            value: fixedText,
                          },
                        }, fixedText)
                      }
                    }
                  }
                }}
            />
          </Tooltip>
        )}
      </InputMask>
    )

Я пытаюсь использовать InputMask , чтобы установить правильный формат и убедитесь, что в качестве входных данных используются только цифры. Я хотел бы отобразить всплывающую подсказку , если время не является приемлемым (например, / 75:89, 99:78 ... et c). Таким образом, все работает, и я могу см. подсказку, если я ввожу что-то недопустимое, однако я не могу избавиться от странного поведения, когда курсор всегда заканчивается в конце поля ввода после какого-либо изменения ... Я искал в Интернете для ответ, но, похоже, ничего не помогло. Обратите внимание, что если я удаляю компонент всплывающей подсказки, обертывающий мой пользовательский ввод (StyledInput), тогда все возвращается на круги своя (курсор останавливается там, где пользователь в данный момент изменяет).

Сначала я подумал, что это проблема рендеринга, поэтому я попытался закомментировать зацепки 

setInputValue(text)
setValueValid(true)

и даже попытался убрать переключатель для всплывающей подсказки open = {! ValueValid}

но похоже, что всплывающая подсказка является причиной проблемы ... у кого-нибудь есть идеи, как решить эту проблему? Любые рекомендации или ссылки на do c будут очень полезны!

Вот код песочницы: https://codesandbox.io/s/wandering-frost-0dy78

1 Ответ

1 голос
/ 13 февраля 2020

Если вы поместите Tooltip вокруг всего элемента InputMask (а не вокруг input внутри InputMask), он будет работать нормально. Я не потратил время, чтобы полностью понять, почему Tooltip вызывает проблемы в предыдущем месте (что потребовало бы углубления во внутренние органы InputMask, чтобы понять, как он управляет положением курсора), но это не удивительно мне, что это вызывает проблемы там.

Ниже приведена модифицированная версия вашей песочницы: 

import React, { useState, useEffect } from "react";
import Tooltip from "@material-ui/core/Tooltip";
import InputMask from "react-input-mask";
import "./styles.css";

export default function App() {
  const [inputValue, setInputValue] = useState("value");
  const [valueValid, setValueValid] = useState(true);

  const checkTimeFormat = time => {
    const [hour, minute] = time.split(":");
    if (parseInt(hour, 10) > 23 || parseInt(minute, 10) > 59) {
      setValueValid(false);
    }
  };

  return (
    <Tooltip
      open={!valueValid}
      placement="bottom-start"
      title="Ops Wrong Time Format"
    >
      <InputMask
        mask="99:99"
        //beforeMaskedValueChange={beforeMaskedValueChange}
        onChange={e => {
          const text = e.target.value;
          setInputValue(text);
          setValueValid(true);
          const fixedText = text.replace(/:/g, "");
        }}
        value={inputValue}
        //{...rest}
      >
        {inputProps => (
          <input
            {...inputProps}
            //autoFocus={rest.autoFocus}
            //className={rest.className}
            onSubmit={checkTimeFormat(inputValue)}
            onKeyDown={e => {
              if (e.keyCode === 13) {
                if (valueValid) {
                  console.log("Value is valid");
                }
              }
            }}
          />
        )}
      </InputMask>
    </Tooltip>
  );
}

Edit InputMask tooltip

...