ix icon indicating copy to clipboard operation
ix copied to clipboard

Published 20 hours ago • verified publisher icon siemens

Issues with input elements

Open piotretm opened this issue 8 months ago • 4 comments

Prerequisites

  • [x] I have read the Contributing Guidelines.
  • [x] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

Hi, I am implementing forms in our applications using your components. I've noticed a few issues with them. Please let me know if this is something you will address in the near future or if maybe I am misusing them.

I provide a stackblitz with all the issues and examples.

The provided code is based on an example of an input element from your documentation.

What type of frontend framework are you seeing the problem on?

JavaScript

Which version of iX do you use?

v2.7.0

Code to produce this issue.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input example</title>
    <style>
      body {
        height: 100vh;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h3>TEXT INPUT</h3>
    <ul>
      <li>Required input is invalid even without any interactions.</li>
      <ix-input
        label="Required"
        placeholder="Required input"
        required
        invalid-text="Required"
      ></ix-input>
      <li>Min length validation is not updated</li>
      <ix-input
        id="min-length"
        placeholder="Min len (3)"
        min-length="3"
      ></ix-input>
      <p id="min-length-info"></p>
    </ul>

    <h3>CHECKBOX</h3>
    <ul>
      <li>Required checkbox is always marked as invalid</li>
      <li>Label is missing the error styling (is not red) and asterisk (*)</li>
      <li>Missing invalid-text property (only on checkbox-group)</li>
      <li>Nice to have - label position property (at least top and right)</li>
      <ix-checkbox
        label="Required"
        invalid-text
        required
        invalid-text="Required"
      ></ix-checkbox>
    </ul>

    <h3>NUMBER INPUT</h3>
    <ul>
      <li>Required input is marked as invalid for 0</li>
      <ix-number-input required label="Input"></ix-number-input>
      <li>
        Just an example of the opposite behavior - min value does not mark the
        input as incorrect until user interaction
      </li>
      <ix-number-input id="min" min="4" max="10"></ix-number-input>
      <li>Step property is missing.</li>
    </ul>

    <h3>DATE INPUT</h3>
    <ul>
      <li>Time input is missing</li>
      <li>Required is invalid without any interactions</li>
      <ix-date-input
        required
        label="Date"
        invalid-text="Required"
      ></ix-date-input>
    </ul>

    <h3>TEXTAREA</h3>
    <ul>
      <li>Required input is invalid even without any interactions</li>
      <ix-textarea
        label="Textarea"
        required
        min-length="3"
        max-length="10"
      ></ix-textarea>
    </ul>

    <h3>RADIO</h3>
    <ul>
      <li>Required is not working (no asterisk)</li>
      <ix-radio-group label="Storage options" required>
        <ix-radio
          label="256GB SSD storage"
          value="256"
          name="storage-256gb"
          required
        ></ix-radio>
        <ix-radio
          label="512GB SSD storage"
          value="512"
          name="storage-512gb"
        ></ix-radio>
        <ix-radio
          label="2TB SSD storage"
          value="2048"
          name="storage-2tb"
          disabled
        ></ix-radio>
      </ix-radio-group>
    </ul>
    <script type="module" src="./init.js"></script>
  </body>
</html>

piotretm avatar Mar 25 '25 15:03 piotretm

🤖 Hello @piotretm

Your issue will be analyzed and is part of our internal workflow. To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-2553

github-actions[bot] avatar Apr 02 '25 06:04 github-actions[bot]

input

  • The issue with the required is already fixed and will be part of the 3.0.0 release
  • minLength validation is a bug

checkbox / radio

I will discuss the checkbox/radio requirements with the ux team

number-input

0 zero should not be count as not valid value, so its a bug

time-input

Is currently in progress an will be part of a later release

danielleroux avatar Apr 02 '25 07:04 danielleroux

@danielleroux thanks for the update. However, you haven't mentioned the step property for number input. Will this be implemented in the future?

Also, do you have a date for the 3.0.0 release?

piotretm avatar Apr 02 '25 07:04 piotretm

@danielleroux thanks for the update. However, you haven't mentioned the step property for number input. Will this be implemented in the future?

Stepper should work: https://ix.siemens.io/docs/controls/input-number?current-tab=development#stepper-buttons

//EDIT yes step is also included in the ticket

Also, do you have a date for the 3.0.0 release?

Currently the alpha release is out and we are awaiting feedback

danielleroux avatar Apr 02 '25 10:04 danielleroux

@danielleroux, thank you for your answers. If I may ask, is there a plan to introduce file input?

piotretm avatar Apr 07 '25 07:04 piotretm

@danielleroux, thank you for your answers. If I may ask, is there a plan to introduce file input?

Not directly as component but as custom field: https://ix.siemens.io/docs/controls/custom-field?current-tab=development#basic basicly a combination of ix-input + ix-button

danielleroux avatar Apr 08 '25 14:04 danielleroux

@danielleroux could you please share an update on the issues? I've seen you have released version 3 of IX components - are all the issues addressed there?

piotretm avatar May 20 '25 14:05 piotretm

@piotretm Should be all addressed, beside the file input. I will close this issue here. Feel free to create a new one if you have still issues.

danielleroux avatar May 21 '25 15:05 danielleroux