Verification code component bug

In the first component I went to use this one but I found some bug because in the final entry it doesn’t limit to 1 digit or remove the focus.
In the second, it does not advance to the next one, having to do it manually.
Could someone tell me if this is really a bug?

Hi @GeovanyNocodeBR :wave:

I didn’t understand your question.

From what I can see, you tried to create a verification code interface using the Tabs element but I’m not sure how you built it or what you’d like the end result to look like so it’s hard to help.

Can you tell us a bit more what you’re trying to build (e.g. by sharing a design) and how you built the current iteration with screenshots or a short video walking us through the different elements and workflows?

1 Like

@GeovanyNocodeBR yes, this is a UX bug with the ‘Secure Code’ pre-built components. I recommend using the verification code component and styling it similar to the ‘Secure Code’ component, if that’s what you’re looking for.

1 Like

Yes, that’s how it is unfortunately… I made a thread recently about using some code to get it to behave how you like.

Although that workaround works, but in the end i abandoned it as its too complex, I just use a normal input field now.

1 Like

Aaaaah ok, got it now! Sorry, it took me a while. :sweat_smile:

I’ll let the tech team know about the bug on the Secure code components.

1 Like

sorry for not being very specific Joyce thanks for always helping us

1 Like

thanks @raelyn a great component but it has some bugs, I believe that the WeWeb team will be solving it soon

No worries at all! Happy to help :slight_smile:

Yeaaah indeed. The team is looking into it. I’ll keep you posted when there’s a fix.

1 Like

Quick update on this one: the team managed to fix part of the issue on the Secure code element inside the WeWeb Editor but it’s still buggy in published apps so we opened a new bug ticket to look into that issue.

Thank you for your speed, in the published application the bug happened mainly in the mobile version, thank you for your usual willingness

1 Like

While we work on fixing the code input, what you can do is following:

Use a basic input of type: Number.
image
image

After that you can navigate to settings and add two HTML attributes:

name: oninput
value: javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);

name: maxlength
value 6 // Any number of digits you want in your code input

1 Like

Masked input was released today so for anyone looking for an easy way to implement a code input this works out of the box with WeWeb

1 Like

OWWWWW, @luka
It will further speed up development and user experience.
Thank you very much WeWeb team

So that’s how the new UI will look. Slick. Nice.

its a lot cooler than just this :face_in_clouds:

I’m not expecting anything less from you @luka I dig your style, it’s very unique.

2 Likes