search

FACT-Finder-Web-Components / magento2-module

FACT-Finder® Web Components for Magento 2
https://web-components.fact-finder.de/
Other
11 stars 17 forks source link

Searchbox deletes early user input #301

Closed simonrl closed 2 years ago

simonrl commented 3 years ago

"omikron/magento2-factfinder-ng", composer.lock says v1.1.1

Magento 2 Commerce 2.3.5-p2

7.3

Steps to reproduce:

  1. open website
  2. type something into search field
  3. wait

Expected behavior:

I'd at least expect the searchbox to maintain the search term which has been entered. Ideally, it would show the suggest after the element has been initialized.

Actual behavior:

When the searchbox gets initialized, the input field is emptied and the user is required to type everything again.

simonrl commented 3 years ago

Hi,

any recommendations how to work on this while still maintaining updateability?

Thanks

a-laurowski commented 3 years ago

Hi @simonrl can i ask you to reproduce that behavior on our test environment? https://magento2-ng.fact-finder.de/default/ Either i didn't understand the problem or i wasn't able to reproduce that. It would be ideal if you could record that and put a gif here (if possible). You can use this free software https://www.screentogif.com/

simonrl commented 3 years ago

Hi,

the issue can best be reproduced in the test environment when throttling the Network speed to "Fast 3G" or below (for example using Chrome's Network-Tools).

Here is a GIF.

MYS-140

Thanks, Simon

a-laurowski commented 3 years ago

Hi @simonrl Thanks for uploading the recording, it was very helpful. It looks like you are trying to input something into the searchbox when the Web Components are not yet initialized. After they are initialized (WebComponentsReady event is emitted) the searchbox input value is reset. You can find more about the ready events in our documentation: https://web-components.fact-finder.de/documentation/4.x/ready-events

You can add unresolved attribute to searchbox in your template in the way described here(Prevent Flash Of Unstyled Content (FOUC)) https://web-components.fact-finder.de/documentation/4.x/include-scripts

After adding that, the searchbox will be invisible until its ready. If you want to apply different styles, you can do that. Just keep in mind that you need to create more specific element selector in order to overwrite the default styles we apply to unresolved elements. https://github.com/FACT-Finder-Web-Components/magento2-module/blob/master/src/view/frontend/web/css/source/ff/_common.less

simonrl commented 3 years ago

Hi @a-laurowski

thanks for the reply.

Yes, I'm entering content into the un-initialized searchbox. I'm doing it on purpose to show the problem, but the customer with a 3G connection won't understand it.

Thanks for hinting me towards unresolved. I'll check with our client if this would be ok for him.

However, the best solution in my opinion would still be that the field's value is kept on initialization.

-- Simon

JulienMorelli commented 3 years ago

Hi @a-laurowski , We are currently running the same issue and we don't want search bar to appear after page is loaded. So the unresolved attribute is not a good solution for us. We find out something in this file :vendor/omikron/magento2-factfinder/src/view/frontend/web/ff-web-components/bundle.js

this.input.value=r&&("*"!==r||this.showAsteriskQuery)?r:""

This part of the code seems to replace the input value with an empty string.

So we decided to replace it with : this.input.value=r&&("*"!==r||this.showAsteriskQuery)?r:this.input.value And it work as expected.

Is it possible to get a fix for this issue ? Or is there any simple way to override minified Javascript file on our side ?

Regards,

Julien

omikron-fp commented 3 years ago

Hi @JulienMorelli and @simonrl,

There are a few other things to consider:

Without a preset query it should be simple to give the manually entered value precedence. But how would you expect the application to behave when there is a pre-defined query for a given page?

Is marking the search readonly until initialisation an option?

simonrl commented 3 years ago

Hi,

FYI we hide the searchbox by default for now, and only show it once it's initialized.

readonly is basically the same solution: it delays the user's ability to search.

Maybe the real problem is the frontend rendering, which depends heavily on the user's hardware and bandwidth.

It would also speed things up if the FF web components weren't delivered as bundle, but instead as modules with require.js usage - most pages of the store don't need ASN, for example.

Regarding the preset query, shouldn't it be doable to check if the searchbox's current value matches the query, or if it is currently focused, and then don't update its value? Or is the display of records on a page dependent on the searchbox's value? Generally, I think user input should have priority, because that's what the user expects.

omikron-fp commented 3 years ago

I agree that bundle size can be an issue for low-bandwidth systems. We do have blueprints for building custom bundles that would allow you to only deploy features you are actually using. However, this topic is still quite far away. But eventually we will address it.

A preset query typically comes paired with search-immediate. While it should be mostly possible to detect pre-init input and prioritise it, when you have search-immediate active, it would trigger a search right after init with whatever is currently typed in the searchbox. This may cause confusion I think. On the other hand, we could make pre-init input cancel search-immediate. But again, if you want to redirect users to a result page with a predefined query, you might not want users to cancel the search request by typing into the searchbox.

I feel this is something we cannot solve in a generic fashion through the library because it seems too specific to individual requirements. I guess the best thing to do for us is to offer the possibility to configure the behaviour.

simonrl commented 3 years ago

On the other hand, we could make pre-init input cancel search-immediate. But again, if you want to redirect users to a result page with a predefined query, you might not want users to cancel the search request by typing into the searchbox.

I understand that, but couldn't you instead use search-immediate on the default-query, if set, and not on the searchbox's value - and then simply preserve that value (which should come from the user in this scenario)? I'm assuming here the user didn't finish typing + hit enter before the searchbox is initialized, so maybe there's a problem. Still worth a try I think.

omikron-fp commented 3 years ago

Even though this would increase complexity it might indeed be worth a try. Reliability is a bit of a concern but this we will have to find out. Thank you for your input. Gladly noted. We will give it a try.

simonrl commented 3 years ago

Glad to help & thanks for giving it a shot :)

omikron-fp commented 2 years ago

Hi @simonrl, @JulienMorelli,

We have implemented the discussed behaviour in the latest version of Web Components 4.0.5. It's available in the latest version of the Magento 2 module.