Fake input field

[JoseTelefonica]

Goal

We need to create an entry point with a fake input field for the search engine project.

Context

Figma: https://www.figma.com/file/q1xa2UZwbYttRO6NNZqx9L/Search-Engine_VIVOBR?type=design&node-id=838-60851&mode=design&t=2f0uoMNPlNb5jKTp-4

Impact

Creating a better user experience for this project.

Discussion Questions

CMS team need to coordinate with Mística on how to do this component and its behaviour.

Additional considerations

No response

Do you have a visual proposal?

No response

[yceballost]

We can see some ways to go:

Creating an extended component for this

We think that this is not the best approach because you have to maintain the UI equivalence with the original inputs along the time

Making a fake input field in Mística

We will absolutely dismiss this way if it's possible.

Adding a fake prop to inputs fields

We don't really like this approach because we can get to fill all the components with this prop. IMPO, this is not a good practice at all.

Forcing no-interaction in input

Would be possible to wrap the component in a div with certain properties that remove interactions and accessibility properties to make the element invisible in terms of interactions and accessibility and then wrap this div and input in a <Touchable> component that provide interaction and accessibility label (this accessibility label must be defined by product design). That's a quick approach from @pladaria

Here the example

In any case, the web team will think of an alternative to this. I created a ticket to keep it mind → WEB-1858

[yceballost]

@JoseTelefonica can we close this discussion?

[JoseTelefonica]

Yes, no problem. Tnks!