Skip to content
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

Text Input Value Change Issue #3064

Open
2 tasks done
kuhnboy opened this issue Dec 9, 2024 · 1 comment
Open
2 tasks done

Text Input Value Change Issue #3064

kuhnboy opened this issue Dec 9, 2024 · 1 comment
Labels
bug Something is wrong and needs to be addressed external-request Bugs and features reported by individuals from other teams in Trimble

Comments

@kuhnboy
Copy link

kuhnboy commented Dec 9, 2024

Prerequisites

Describe the issue

We are using a modus text input to perform transformation of the value as the user types to format a phone number for example. We've noticed that the HTML input and the 'value' of the Modus Text input don't seem to always track together.

Modus Sample Code:

<html>

<head>
    <script src="test.bundle.js" type="module"></script>
</head>

<body>
    <modus-text-input id="my-phone-number" label="What's ya number?"></modus-text-input>
    old value: <span id="old-value"></span><br/>
    new value: <span id="new-value"></span>

    <script>
        const phoneInput = document.getElementById('my-phone-number');
        const oldValue = document.getElementById('old-value');
        const newValue = document.getElementById('new-value');

        phoneInput.addEventListener('valueChange', (value) => {
            const newText = value.detail.replace(/\D/g, '');

            oldValue.innerText = phoneInput.value;
            phoneInput.value = newText;
            newValue.innerText = phoneInput.value;
        });
    </script>
</body>

</html>

Modus Behavior:
127 0 0 1_8080 and 3 more pages - Personal - Microsoft_ Edge 2024-12-09 12-16-04

Using a standard HTML input does not cause this behavior:

Vanilla Sample Code:

<html>

<head>
    <script src="test.bundle.js" type="module"></script>
</head>

<body>
    What's ya number?
    <input type="text" id="my-phone-number"/>
    old value: <span id="old-value"></span><br/>
    new value: <span id="new-value"></span>

    <script>
        const phoneInput = document.getElementById('my-phone-number');
        const oldValue = document.getElementById('old-value');
        const newValue = document.getElementById('new-value');

        phoneInput.addEventListener("input", (e) => {
            const newText = e.target.value.replace(/\D/g, '');

            oldValue.innerText = phoneInput.value;
            phoneInput.value = newText;
            newValue.innerText = phoneInput.value;
        });
    </script>
</body>

</html>

Vanilla Behavior:
127 0 0 1_8080 and 5 more pages - Personal - Microsoft_ Edge 2024-12-09 14-19-30

Reduced test cases

No response

What operating system(s) are you seeing the problem on?

No response

What browser(s) are you seeing the problem on?

No response

What is the issue regarding ?

@trimble-oss/modus-web-components

What version of npm package are you using ?

1.0.0

Priority

High

What product/project are you using Modus Components for ?

Trimble Unity

What is your team/division name ?

O&PS

Are you willing to contribute ?

None

Are you using Modus Web Components in production ?

No response
@kuhnboy kuhnboy added the bug Something is wrong and needs to be addressed label Dec 9, 2024
@github-actions github-actions bot added the external-request Bugs and features reported by individuals from other teams in Trimble label Dec 9, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 9, 2024

Hello @kuhnboy! Thanks for opening an issue. The Modus core team will get back to you soon (usually within 24-hours) and provide guidance on how to proceed. Contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to.

Please wait until the issue is ready to be worked on before submitting a PR, or you can reach out to the core team if it is time bound. For trivial things, or bugs that don't change the expected behaviors and UI, you can go ahead and make a PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something is wrong and needs to be addressed external-request Bugs and features reported by individuals from other teams in Trimble
Projects
Modus Web Components
Status: In Review
Milestone
No milestone
Development

No branches or pull requests
1 participant
@kuhnboy