[OutSystems UI Web] Input field inside a navigation-tabs widget.

Forge Component
(39)
Published on 2 Oct (13 days ago) by OutSystems R&D
39 votes
Published on 2 Oct (13 days ago) by OutSystems R&D

Hi,


When I use an input widget inside a navigation-tabs widget, the character "white-space" doesn't work.

This behavior it's presents just on desktop browsers, for mobile browsers it's working fine.


Can you please confirm this behavior and if it's a bug what is the workaround solution?


Best Regards

nuvem mix wrote:

Hi,


When I use an input widget inside a navigation-tabs widget, the character "white-space" doesn't work.

This behavior it's presents just on desktop browsers, for mobile browsers it's working fine.


Can you please confirm this behavior and if it's a bug what is the workaround solution?


Best Regards


I had this same issue.

Here is a workaround:

  • Clone OutSystemsUIWeb;
    • Try to open it as depicted on the image below. You'll see a message stating that this is a System Module and you'll need to clone it;
  • Remove the code line that has the preventDefault()function (as illustrated in this image);
  • Publish the Clone and add the Clone of OutSystemsUIWeb to the eSpace dependencies;
    • Remove the original OutSystemsUIWeb dependency;
    • Publish the eSpace. You should now be able to add spaces in the input field;


Hello nuvem & Andres.

Thank you for bringing this issue to our attention.

It has been added to our backlog and we'll work on it ASAP.


This being said, that workaround might work, but bear in mind that by removing the reference to OutSystems UI, any update that we do to the Framework won't be available in your application.


Keep an eye out for updates of the Framework on the Forge, as we'll be working on improvements.

Cheers,

Rui Mendes

Andres Moreno wrote:

nuvem mix wrote:

Hi,


When I use an input widget inside a navigation-tabs widget, the character "white-space" doesn't work.

This behavior it's presents just on desktop browsers, for mobile browsers it's working fine.


Can you please confirm this behavior and if it's a bug what is the workaround solution?


Best Regards


I had this same issue.

Here is a workaround:

  • Clone OutSystemsUIWeb;
    • Try to open it as depicted on the image below. You'll see a message stating that this is a System Module and you'll need to clone it;
  • Remove the code line that has the preventDefault()function (as illustrated in this image);
  • Publish the Clone and add the Clone of OutSystemsUIWeb to the eSpace dependencies;
    • Remove the original OutSystemsUIWeb dependency;
    • Publish the eSpace. You should now be able to add spaces in the input field;


Hello Andres,

I'll try your workaround.

Thank you for your help.


Rui Mendes wrote:

Hello nuvem & Andres.

Thank you for bringing this issue to our attention.

It has been added to our backlog and we'll work on it ASAP.


This being said, that workaround might work, but bear in mind that by removing the reference to OutSystems UI, any update that we do to the Framework won't be available in your application.


Keep an eye out for updates of the Framework on the Forge, as we'll be working on improvements.

Cheers,

Rui Mendes

Hello Rui,

I don't want to lose the updates, but for now, I'll try the Andres' workaround and keep waiting for an update.

Thank You.


Rui Mendes wrote:

Hello nuvem & Andres.

Thank you for bringing this issue to our attention.

It has been added to our backlog and we'll work on it ASAP.


This being said, that workaround might work, but bear in mind that by removing the reference to OutSystems UI, any update that we do to the Framework won't be available in your application.


Keep an eye out for updates of the Framework on the Forge, as we'll be working on improvements.

Cheers,

Rui Mendes

Hi Rui,

Any date for fixing this bug ? 


Solution

It has been fixed in version 1.3.0

Solution

Andres Moreno wrote:

It has been fixed in version 1.3.0


Hello Andres,


Can you elaborate on how exactly it was changed and/or fixed? For me, space button on press is still not working inside Tabs. Thanks!

The OutSystems team fixed as part of a release of OutSystemsUI Web Module.

So all I had to do is update that module to get their fix.

Do you know which version of the Module you are running?

Andres Moreno wrote:

The OutSystems team fixed as part of a release of OutSystemsUI Web Module.

So all I had to do is update that module to get their fix.

Do you know which version of the Module you are running?

It's version 1.7.5


Have you tried the workaround I specified on my initial response.

If you try that and it makes it work, they might have reintroduced the issue.

Andres Moreno wrote:

Have you tried the workaround I specified on my initial response.

If you try that and it makes it work, they might have reintroduced the issue.

I didn't try the workaround. I'm aware of it, but we would like to keep getting the updates of OutSystemsUIWeb since our front-end team is not that big it would solve a lot of possible issues in the future. Instead, we'll keep looking for other workarounds. Most likely we'll just avoid tabs pattern for now. 


However, the JS part of the pattern seems to have a fix it's just not working for us.


Thank you Andres!


Hi Marius,

What character exactly are you trying to type in the input?

The code in question related to accessibility to allow to navigate to the focused Tab by pressing the space key, but it should allow to type the character in an input.

Anyway, the team will look into this, as it was supposed to be fixed a while ago.

My regards

Dinis Carvalho wrote:

Hi Marius,

What character exactly are you trying to type in the input?

The code in question related to accessibility to allow to navigate to the focused Tab by pressing the space key, but it should allow to type the character in an input.

Anyway, the team will look into this, as it was supposed to be fixed a while ago.

My regards

Hello Dinis,


It was the space key. However, I figured out that the issue is on our side.

Default inputs work just ok inside the Tabs pattern. Sorry for the confusion.


The issue was that we're using a custom web block with emojiOneAre. And the space key doesn't work only when using that web block of emojiOneAre inside the Tabs pattern.


Will keep you posted if we'll figure out what exactly happens there.

Thank you!