Возникли проблемы с функциональностью typeahead / интеллектуального тестирования

Question

Я использую material-table , и я решил реализовать функцию "typeahead", которую имеет Google. Примерно так:

Чтобы понять это, я обернул компонент MTableEditField своим собственным, который выглядит так:

import React, { useState } from "react";
import { MTableEditField } from "material-table";

const CustomTableEditField = props => {
  const [rawValue, setRawValue] = useState(props.value);
  const [suggestedValue, setSuggestedValue] = useState("asdasda");

  const handleOnChange = value => {
    // ... logic to find best match and set state values
  };

  return (
    <MTableEditField
      inputProps={
        suggestedValue
          ? {
              style: {
                backgroundColor: "#557D92",
                color: "white",
                padding: "offset"
              }
            }
          : {}
      }
      {...props}
      value={suggestedValue ?? rawValue}
      onChange={handleOnChange}
    />
  );
};

export default CustomTableEditField;

Проблема в том, что когда есть значение, оно выглядит следующим образом:

Я не хочу, чтобы оно изменило весь фон если будет матч. Я хочу, чтобы он сохранил уже напечатанный текст, с добавленным к нему предложенным текстом.

Я посмотрел на градиенты, которые рассматриваются как изображения, размер которых можно изменить, но я не смог получить что-либо для рендеринга .

Это вообще возможно, или я просто трачу свое время?

Редактировать

Stackblitz

Answer 1

Не уверен насчет настройки MTableEditField, но вы можете попробовать что-то вроде следующего, написав собственный компонент.

1) Основная идея состоит в том, чтобы разделить слова (необработанные и предложения) и оставить их отдельными span элементами, чтобы мы могли получить полный контроль над стилем.
2) Оберните элементы span в div и напишите собственные обработчики событий onChange.

PS: это пример кода, потребуется точная настройка кода.

Проверьте рабочий образец на stackblitz

import React, { useState } from "react";

const dict = ['apple', 'mango', 'berry'];

const CustomTableEditField = props => {
  const [rawValue, setRawValue] = useState("");
  const [suggestedValue, setSuggestedValue] = useState("");

  const handleKeyPress = (event) => {
    // console.log('key: ', event.key);
    let new_raw;
    if (event.key === "Backspace") {
      new_raw = rawValue.slice(0, rawValue.length - 1);
    } else {
      new_raw = `${rawValue}${event.key}`;
    }
    setRawValue(new_raw);

    const suggested = dict.find(word => word.startsWith(new_raw));
    if (suggested && new_raw) {
      setSuggestedValue(suggested.slice(new_raw.length));
    } else {
      setSuggestedValue("");
    }
  }

  return (
    <div
      tabIndex="0"
      onKeyDown={handleKeyPress}
      style={{border: '1px solid green', height: '30px', color: 'black'}}>
      <span>{rawValue}</span>
      {suggestedValue && (
          <span 
            style={{backgroundColor: "#557D92",
            color: "white",
            padding: "offset"}}> {suggestedValue} </span>
      )}
      </div>
  );
};

export default CustomTableEditField;