Having trouble with typeahead/predictive test functionality

Mike K :

I'm using material-table and I decided to implement a "typeahead" kind of feature that Google has. Something like this:

To realize this, I wrapped the MTableEditField component with my own, which looks like this:

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;

The problem is that when there is a value, it looks like:

I don't want it to change the whole background if there will be a match. I want it to keep the already-typed text, with suggested text appended to it.

I looked into gradients, which are treated as images that can be resized, but I wasn't able to get anything to render.

Is this possible to do at all, or am I just wasting my time?

Edit

Stackblitz

Siva Kondapi Venkata :

Not sure about the customization of MTableEditField, But you can try some thing like following by writing own component.

1) The main idea is split the words (raw and suggestion) and keep them separate span elements so that we can get full control of the styling.
2) Wrap the span elements in div and write the own onChange event handlers.

PS: this is sample code, Will need to fine tune the code.

Check out the working sample on 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;