Number Selected Filters in Paper-Search-Bar Shown in Wrong Position

willy-juisan commented 7 years ago

If I use paper-search-bar without set the property "nr-selected-filters", and changed it via javascript function, the number of selected filters will shown in wrong position (not inside the filter button). Here is the code that I used (taken from paper-search-bar Demo) :

<!doctype html>
<html>
    <head>
        <title>Demo</title>
        <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
        <link rel="import" href="bower_components/paper-search/paper-search-bar.html">
    </head>

    <body>
        <dom-bind>
            <template>
                <paper-search-bar
                    id="searchBar"
                    query="{{query}}"
                    placeholder="Enter search term"
                    on-paper-search-search="search"
                    on-paper-search-filter="filter">
                </paper-search-bar>
            </template>
        </dom-bind>

        <script>
            var scope = document.querySelector("dom-bind");
            scope.search = function() {
                alert("Searching for " + scope.query);
            };
            scope.filter = function() {
                this.$.searchBar.nrSelectedFilters = 4;
            };
        </script>
    </body>
</html>

Try to run it in chrome, and when I click the filter button, it will show red bullet marked with "4" text in the center of paper-search-bar :

Strange thing is, when we set the property nr-selected-filters first in paper-search-bar element, it will shown in the right position (inside the filter button)

Note: I use paper-search version 2.0.6

willy-juisan commented 7 years ago

Its already eleven days, and no sign of anyone show up to help me.. @urdeveloper @chadweimer @ankon @avdaredevil @cminardi please kindly help me to solve this issue.. Thank you..

ronnyroeller commented 7 years ago

@willy-juisan - It would be helpful to understand your use case for setting the property directly via JavaScript instead of using Polymer data binding. The obvious solution seems to be using data binding if that works...

willy-juisan commented 7 years ago

@ronnyroeller - I was new to this polymer stuff, so please forgive me if I don't know how to use this element correctly. I just follow the example at webcomponents site, and I don't know how to use it with data binding, could you please point me a good and more comprehensive example (beside the one at webcomponents)?.. But IMHO, I still think that setting the property directly should give a same result just like when we use data binding..

ronnyroeller commented 7 years ago

@willy-juisan Have a look to the <paper-search-panel>, which uses the <paper-search-bar>: https://github.com/Collaborne/paper-search/blob/master/paper-search-panel.html#L79

Here is the demo to see it in action: https://www.webcomponents.org/element/Collaborne/paper-search/demo/demo/paper-search-panel.html

willy-juisan commented 7 years ago

@ronnyroeller I made a simple demo using data binding at here. Just try to select any filters, and it will produce the same issue when the initial value for this field was set to zero. But when we set the initial value for this field not zero, the component will be working smooth, just check it here. For my case, it is very common that user for the first time don't have any filters selected, so I think this issue is really important. Please help me, thank you..

ronnyroeller commented 7 years ago

Fixed by https://github.com/Collaborne/paper-search/commit/52dca65fdc5776c142ff0a4a12eb15a7a8c57b44

willy-juisan commented 7 years ago

Thank you so much @ronnyroeller :+1:

Collaborne / paper-search

Number Selected Filters in Paper-Search-Bar Shown in Wrong Position #24