I need a textarea field containing label inside the textarea field. The input text will start from the end of the label. If the label is so long, it will go to the second line. According to device width, the field and label will be responsive.
My expectation
Name of the Hospital/Clinic/Consultation Center, etc. : Dhaka Medical College and Hospital
What I've tried
const [value, setValue] = useState('');
<TextField
label="Name of the Hospital/Clinic/Consultation Center, etc."
multiline
minRows={2}
fullWidth
className="myname"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
**Style:**
.myname {
label {
transform: translate(14px, 16px) scale(1) !important;
color: #000 !important;
white-space: normal !important;
word-wrap: break-word !important;
word-break: break-word !important;
}
fieldset {
legend {
display: none !important;
visibility: hidden !important;
}
}
}
I've tried using contentEditable
. Here is the solution
const LongLabelTextarea = (props) => {
const { label, onChange = () => {}, className } = props;
const containerRef = useRef(),
contentRef = useRef();
useEffect(() => {
const container = containerRef.current,
content = contentRef.current;
function placeCaretAtEndOfLabel() {
const range = document.createRange();
const sel = window.getSelection();
range.selectNodeContents(content);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
}
// Place caret at end on focus
container.addEventListener("click", placeCaretAtEndOfLabel);
content.addEventListener("focus", placeCaretAtEndOfLabel);
// Extract user input
content.addEventListener("input", (e) => {
//console.log("User input:", content.innerText.trim());
e.target.value = content.innerText;
onChange(e);
});
}, []);
return (
<div className={`${Style.container} ${className}`} ref={containerRef}>
<label className={Style.label}>{label} </label>
<div className={Style.content} contentEditable={true} ref={contentRef}></div>
</div>
);
};
export default LongLabelTextarea;
Style:
.container {
border: 1px solid #ccc !important;
padding: 8px !important;
word-break: break-word !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
border-radius: 3px !important;
}
.container:has(.content:focus) {
outline: none !important;
border-color: #007bff !important;
}
.label {
display: inline !important;
color: #888 !important;
pointer-events: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
}
.content {
display: inline !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
outline: none !important;
}
Details: https://codesandbox.io/p/devbox/longlabeltextarea-dgk7w3