I am going nuts trying to get this box to work. I am using React 18.

Here is code that applies to this particular text box in various areas of my application:

In render part of component:

const [description, setDescription] = useState('');

JSX:

      <div className="event-form-container">
        <h1 id="event-title">Create a New Event</h1>
        <form className="create-event-form" onSubmit={handleSubmit}>
          <label className="event-label" for="description">
            Description
            <input
              id="description"
              className="event-input textarea"
              type="textarea"
              value={description}
              rows="5"
              cols="33"
              wrap="soft"
              onChange={(e) => setDescription(e.target.value)}
              />
          </label>
      </form>
    </div>

Various CSS from different files that have an impact on it:

input,
select {
    background-color: rgb(79, 73, 73);
    color: white;
    border-radius: 3px;
    box-sizing: border-box;
    width: 25%;
}

.textarea {

    height: 6em;
    display: inline-block;
}

.event-label,
.event-input {
    display: block;
    width: 25%
}

.event-input {
    position: absolute;
    padding: 10px;
}

The form itself is a flex box.

I suck at CSS and also the class of "event-input" applies to a bunch of other inputs that I am not showing here for brevity purposes.

Any clue what I can do to make this textarea stop acting like a 1 line text input??

CodePudding user response：

Why are you not using textarea tag

<textarea id="txtArea" rows="5" cols="33"></textarea>

CodePudding user response：

You might be looking for a textarea element instead of an input element. Here is a small demo on using textarea in react.

const { useState } = React;

const Example = () => {
    const [text, setText] = useState("");
  
    return (
        <div>
            <textarea 
              value={text} 
              onChange={e => setText(e.target.value)}
              rows="5" cols="33"
              >
            </textarea>
            <div>{text}</div>
            <button onClick={() => setText("")}>
                reset
            </button>
        </div>
    );
};

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <Example />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

CodePudding user response：

You need to use a textarea to get multiline handling not input

Just change :

<input
              id="description"
              className="event-input textarea"
              type="textarea"
              value={description}
              rows="5"
              cols="33"
              wrap="soft"
              onChange={(e) => setDescription(e.target.value)}
              />

to :

<textarea id="description"
              className="event-input textarea"
              type="textarea"
              value={description}
              rows="5"
              cols="33"
              wrap="soft"
              onChange={(e) => setDescription(e.target.value)}>
</textarea>