Input Fields and Newlines

by mariomc

HTML

<h1>Input Fields and Newlines</h1>
<p>How to reproduce?</p>
<ol>
  <li>Click "Sync to view".</li>
  <li>Click "Send to Backend".</li>
  <li>Notice that despite having the same values from the source, they change in the transition back into backend (input fields lose the natural newline).</li>
</ol>

<div class="columns">
  <section>
    <h1>Source</h1>
    <button id="send-to-view">
      Sync to View ->
    </button>
    <p>See this as your backend</p>
    <textarea id="backend-input">
a
b
c</textarea>
    <p>JSON.stringify output: <span id='backend-output'></span></p>


  </section>

  <section>
    <h1>View</h1>
    <button id='send-from-view'>
      Send to Backend ->
    </button>
    <p>Input</p>
    <input id="input" />
    <p>JSON.stringify output: <span id='input-output'></span></p>
    <p>Textarea</p>
    <textarea id="textarea"></textarea>
    <p>JSON.stringify output: <span id='textarea-output'></span></p>

  </section>
  <section>
    <h1>View -> Backend Payload</h1>
    <p>These two fields should be equal value.</p>
    <span id="payload-output"></span>
  </section>
</div>

CSS

.columns {
  display: flex;
  justify-content: space-around;
}

section {
  width: 30%;
}

span {
  background-color: lightgrey;
  min-width: 100px;
  min-height: 2rem;
  display: block;
}

textarea {
  min-height: 3rem;
}

JavaScript

var button = document.querySelector('#send-to-view')
var button2 = document.querySelector('#send-from-view')

var input = document.querySelector('#input')
var backend = document.querySelector('#backend-input')
var backendOptput = document.querySelector('#backend-output')
var inputOutput = document.querySelector('#input-output')
var textarea = document.querySelector('#textarea')
var textareaOutput = document.querySelector('#textarea-output')
var payloadOutput = document.querySelector('#payload-output')

const jsonOutput = (target, value) => {
  target.textContent = JSON.stringify(value)
}

const inputs = [{
    input: backend,
    output: backendOptput
  },
  {
    input: input,
    output: inputOutput
  }, {
    input: textarea,
    output: textareaOutput
  }
];

const updateValues = () => {
  inputs.forEach(({
    input,
    output
  }) => {
    jsonOutput(output, input.value);
  });
}

button.addEventListener('click', () => {
  input.value = backend.value;
  textarea.value = backend.value;
  updateValues();
});

button2.addEventListener('click', () => {
  payloadOutput.textContent = JSON.stringify({
    input: input.value,
    textarea: textarea.value
  });

});

inputs.forEach(({
  input,
  output
}) => {
  input.addEventListener('keyup', updateValues);
});