当工具提示反应时光标移动到输入的末尾

Question

我正在尝试构建一个输入字段，它接受时间作为输入，这是我的代码

      <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>
    )

如果时间不可接受（例如/75:89、99:78...等），我正在尝试使用InputMask to set the correct format and to make sure only numbers are used as an input. I would like to display a tooltip所以一切似乎都在工作，我如果我输入无效的内容，我能够看到工具提示，但是，我无法摆脱一种奇怪的行为，即在进行任何更改后，光标总是在输入框的末尾结束......我已经搜索过在线寻找答案，但似乎没有什么帮助。请注意，如果我删除包装我的自定义输入 (StyledInput) 的工具提示组件，那么一切都会恢复正常（光标停止在用户当前正在修改的位置）。

起初我以为这是一个渲染问题所以我试着注释掉钩子

setInputValue(text)
setValueValid(true)

甚至试图删除工具提示的切换打开={!valueValid}

但似乎工具提示是导致问题的原因...有人知道如何解决这个问题吗？任何建议或对文档的参考都会有很大帮助！

沙箱代码如下： https://codesandbox.io/s/wandering-frost-0dy78

Answer 1

如果您将 Tooltip 放在整个 InputMask 元素周围（而不是 InputMask 内的 input 周围），它可以正常工作。我还没有花时间完全理解为什么 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>
  );
}

当工具提示反应时光标移动到输入的末尾

Cursor moves to end of input when tooltip in react

javascript

input-mask

reactjs

material-ui