search

aidewoode / office-ui-fabric-vue

Office UI Fabric implementation for Vue.js
https://aidewoode.github.io/office-ui-fabric-vue/
Other
273 stars 30 forks source link

SearchBox does not persist text in input #12

Closed sureshjoshi closed 6 years ago

sureshjoshi commented 6 years ago

I'm not sure if this is an issue with this library, or the underlying SearchBox, but I've noticed that when I type something - my v-model is correctly updated.

However, when I click away from the SearchBox, the box is reset BUT the v-model is still persisted.

In my case, I'm using the SearchBox with a computed property to live filter a list... However, when I click away from the SearchBox, the field clears itself - but my filtered list is still filtered as a result of v-model not being updated.

I'd recommend that either the SearchBox UI needs to persist, or clicking away and clearing out the SearchBox should also reset the v-model value.

Similar issue when pressing the "X" - the field is cleared, but the v-model is not updated.

sureshjoshi commented 6 years ago

And having gone over this some more - I think it's related to the hasValue flag not correctly updating - as when I update it manually, it appears to work.

Perhaps it should be a computed property?

aidewoode commented 6 years ago

You are right, it's an issue. v-model value should be cleanup when click search-box clear button or click away from search-box.

This issue happened because the search-box in office-ui-fabric-js don't dispatch any event like change or input when cleanup value in search-box. So this component in the office-ui-fabric-vue can't trigger input event to update value.

So I add mousedown and blur event manually to clean the value.

Thanks a lot.