scania-digital-design-system/sdds

[Bug report]: sdds-textfield in regular forms with submit

Closed this issue · 2 comments

mmexvr commented

Requirements before reporting

  • No duplicated issue reported.
  • I have read the contribution guidelines.
  • I have checked the lastest version if the bug exist there. See all avaliable packages at npmJS.com
  • I have made sure that the issue comes from SDDS packages by removing SDDS from my project as a test.
  • I have followed the installation guide.

Package

@scania/components

Package versions

4.0.0+

Browser

Chrome

Framework

Plain HTML

Version

Any framework or setup that requires simple form

Reproduction steps

  1. Create a form in plain html
  2. Import SDDS components and theme
  3. Add sdds-textfield or sdds-textarea (any form component)
  4. Add a way of seeing the data being submit
  5. See what the sdds-textfield puts out after submit

Code example

<html lang="en-GB">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Basic SDDS Template</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="html.css" />
    <script src="node_modules/@scania/theme-light/dist/light-theme.js"></script>
    <script src="node_modules/@scania/components/dist/core.js"></script>
  </head>

  <style>
    * {
      margin: 6px 0;
    }
  </style>
  <body>
    <sdds-theme></sdds-theme>

    <div class="sdds-container">
      <div class="sdds-row">
        <div
          class="sdds-col-xs-12 sdds-col-sm-12 sdds-col-md-12 sdds-col-lg-12 sdds-col-xl-12 sdds-col-xxl-12 sdds-col-max-12"
        >
          <h1>Form Example</h1>
        </div>
        <div
          class="sdds-col-xs-12 sdds-col-sm-12 sdds-col-md-6 sdds-col-lg-3 sdds-col-xl-3 sdds-col-xxl-3 sdds-col-max-3"
        >
          <form class="form">
            <sdds-textfield
              name="user"
              type="text"
              value="username"
            ></sdds-textfield>
            <sdds-textfield
              name="pw"
              type="password"
              value="password"
            ></sdds-textfield>
            <div class="sdds-checkbox-item">
              <input
                name="checkbox"
                class="sdds-form-input"
                checked
                type="checkbox"
              />
              <label class="sdds-form-label" for="radio-button1">
                Checkbox
              </label>
            </div>

            <div class="sdds-radio-button-group">
              <div class="sdds-radio-item">
                <input
                  class="sdds-form-input"
                  type="radio"
                  checked
                  name="radio-button"
                />
                <label class="sdds-form-label" for="radio-button1">
                  Radiobutton
                </label>
              </div>
            </div>

            <div class="sdds-dropdown">
              <select name="dropdown" id="mySelect">
                <option value="truck">Truck</option>
                <option value="bus">Bus</option>
              </select>
            </div>

            <div>
              <input
                class="sdds-btn sdds-btn-primary sdds-btn-sm"
                type="submit"
              />
            </div>
          </form>
        </div>

        <div
          class="sdds-col-xs-12 sdds-col-sm-12 sdds-col-md-6 sdds-col-lg-3 sdds-col-xl-3 sdds-col-xxl-3 sdds-col-max-3"
        >
          <form class="form2">
            <div>
              <input type="text" name="user" value="username" />
            </div>
            <div>
              <input type="password" name="password" value="password" />
            </div>
            <select name="dropdown">
              <option value="truck">Truck</option>
              <option value="bus">Bus</option>
            </select>

            <div>
              <input type="radio" checked name="radio-button" />
              <label> Radiobutton </label>
            </div>

            <div>
              <input name="checkbox" checked type="checkbox" />
              <label> Checkbox </label>
            </div>
            <div>
              <input class="sdds-btn sdds-btn-primary" type="submit" />
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="show-data"></div>
  </body>

  <script>
    const form = document.querySelector('.form');
    const form2 = document.querySelector('.form2');
    const showData = document.querySelector('.show-data');

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      const data = Object.fromEntries(new FormData(e.target).entries());
      console.log(data);
      showData.innerHTML = JSON.stringify(data);
    });
    form2.addEventListener('submit', (e) => {
      e.preventDefault();
      const data = Object.fromEntries(new FormData(e.target).entries());
      console.log(data);
      showData.innerHTML = JSON.stringify(data);
    });
  </script>
</html>

Screenshots

Screen.Recording.2022-04-26.at.14.50.05.mov
Screen.Recording.2022-04-26.at.14.46.16.mov

Expected behaviour

Should be able to submit a form without workarounds

Console errors

Contact information

No response

AB#1896

alexlioliopoulos commented

Quite an important issue! We will spend some time on it in our next sprint.

  • 👍1
nathalielindqvist commented

Both textfield and textarea components are shipped with a false shadowDOM, in both @scania/components and @scania/tegel packages, so in the latest versions of these packages this should no longer be an issue.