DEV Community

Rafi
Rafi

Posted on

Wrapping text input with non editable element at front

I recently had to build text input that wraps to the next line but has non editable element at the start. Apparently it is quite easy to build with content editable here is the code snippet that does that

import React, { useCallback } from "react";

const WrappingInput = () => {
  const handlePaste = useCallback(event => {
    event.preventDefault();
    const value = event.clipboardData.getData("text/plain");
    document.execCommand("insertHTML", false, value);
  }, []);

  return (
    <div className="wrapping-input">
      <span>Label</span>
      <span contentEditable onPaste={handlePaste} />
    </div>
  );
};

export default WrappingInput;

Enter fullscreen mode Exit fullscreen mode

and the corresponding css

.wrapping-input > span:first-child {
  padding: 0.1em 0.5em;
  background: #ccc;
}

.wrapping-input > span:last-child {
  padding: 0.1em 0.5em;
  outline: none;
}
Enter fullscreen mode Exit fullscreen mode

and you get text input like this.

Alt Text

Discussion (0)