Skip to content

Issues with input elements #1801

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
2 tasks done
piotretm opened this issue Mar 25, 2025 · 6 comments
Open
2 tasks done

Issues with input elements #1801

piotretm opened this issue Mar 25, 2025 · 6 comments
Labels
Workflow: Issue created JIRA issue is created and will be analyzed

Comments

@piotretm
Copy link

piotretm commented Mar 25, 2025 •
edited
Loading

Prerequisites

  • I have read the Contributing Guidelines.
  • 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 piotretm added the triage We discuss this topic in our internal weekly label Mar 25, 2025
@danielleroux danielleroux added Workflow: Issue created JIRA issue is created and will be analyzed and removed triage We discuss this topic in our internal weekly labels Apr 2, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 2, 2025 •
edited by danielleroux
Loading

🤖 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

@danielleroux
Copy link
Collaborator

danielleroux commented Apr 2, 2025 •
edited
Loading

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

@piotretm
Copy link
Author

piotretm commented Apr 2, 2025 •
edited
Loading

@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?

@danielleroux
Copy link
Collaborator

danielleroux commented Apr 2, 2025 •
edited
Loading

@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

@piotretm
Copy link
Author

piotretm commented Apr 7, 2025

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

@danielleroux
Copy link
Collaborator

@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 danielleroux mentioned this issue Apr 15, 2025
Merged
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Workflow: Issue created JIRA issue is created and will be analyzed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@danielleroux @piotretm