Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

facets searchOnChange Causing Console Errors (and Impacting SpellCheck) #509

Closed
rosiegrant opened this issue Feb 24, 2020 · 1 comment
Closed

facets searchOnChange Causing Console Errors (and Impacting SpellCheck) #509

rosiegrant opened this issue Feb 24, 2020 · 1 comment
Assignees
@alexisgrow

Comments

@rosiegrant
Copy link
Contributor

Current behavior: When I set "searchOnChange" in the facets component to true, get a bunch of console errors. (In addition, the spell check component does not show up, but I'm guessing it has to do with some issues in setting state). When I remove the "searchOnChange" attribute, no console errors, and spellcheck works fine.

Expected behavior: Setting the search on change attribute should work fine (and the spell check component should show up)

Version:
Verified this on dev/v0.13.0 (disregard the fact that I'm using the styling and templates) -- can work to verify on an earlier version (I'm guessing it's always been there since we didn't change anything having to do with facets in this version).

Console Error:

image

`<!doctype html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<meta name="format-detection" content="telephone=no">
<script src='./sharedconfig.js'></script>
<script src='./combiner.js'></script>
<script src='./builderHelpers.js'></script>
<!-- <script src="/templates.js"></script> -->
<script src="./templates.js"></script>

<link rel="stylesheet" href="../css/all.css">
<link rel="stylesheet" type="text/css" href="https://assets.sitescdn.net/answers/dev/vr/filters2/answers.css">

<link rel="stylesheet" href="../css/healthcare.css">
<style>
    ul, li {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .yxt-StandardCard-image {
        min-width: 25%;
    }

    .yxt-Results-titleBar { 
        display: none !important; 
    }

</style>

<!-- <link rel="stylesheet" href="/css/healthcare.css"> -->
<title>Healthcare Demo</title>
<script>
    function initAnswers() {
        const verticalKey = "providers";
        ANSWERS.init({
            apiKey: sharedConfig.apiKey,
            experienceKey: sharedConfig.experienceKey,
            debug: true,
            businessId: sharedConfig.businessId,
            templateUrl: "https://assets.sitescdn.net/answers/dev/vr/filters2/answerstemplates.compiled.min.js",
            locale: 'en',
            experienceVersion: sharedConfig.experienceVersion,
            promptForLocation: true,
            fieldFormatters: buildFieldFormatters(sharedConfig),
            search: {
              defaultInitialSearch: '',
              verticalKey,
            },
            navigation: {
                tabs: buildTabLinks(sharedConfig, verticalKey)
            },
            onReady: function () {


                this.addComponent('SearchBar', {
                    container: '#search-form',
                    query: '',
                    verticalKey,
                    allowEmptySearch: true,
                    ...sharedConfig.componentSettings.SearchBar,
                });  


                this.addComponent('VerticalResults', {
                    container: '#results',
                    ...sharedConfig.verticals.providers,
                    verticalKey: 'providers'               
                });

                this.addComponent('LocationBias', {
                    container: '.location-bias-container',
                    ...sharedConfig.componentSettings.LocationBias

                })

                this.addComponent('Facets', {
                    container: '.facets',
                    searchOnChange: true,
                    verticalKey,
                    showMoreLimit: 5,  
                    expand: false                      
                });  

                this.addComponent('SortOptions', {
                    container: '.sorting',
                    ...sharedConfig.verticals.providers.componentSettings.Sorting

                });

                // TODO (Rose): Styling for pagination needs work, leaving out for right now
                this.addComponent('Pagination', {
                    container: '.pagination'
                });                   


                this.addComponent('SpellCheck', {
                    container: "#spell-check",
                    ...sharedConfig.componentSettings.SpellCheck
                });

            }
        });
    }
</script>
<script src="https://assets.sitescdn.net/answers/dev/v0.13.0/answers.min.js" onload="initAnswers()" async
    defer></script>
Providers
    <div class="Answers-Big-Wrapper" style="display: flex; max-width: 1100px; margin: 0 auto;">
        <div class="sticky">
            <div class="filter-search-container"></div>
            <div class="facets"></div>
            <div class="sorting"></div>
        </div>
        <div class="Answers-container Answers-resultsWrapper">
            <div class="Answers-spellCheck js-answersSpellCheck" id='spell-check'></div>
            <div class="Answers-verticalResults" id='results'></div>
            <div class="Answers-qaSubmission js-Answers-qaSubmission"></div>
            <div class="location-bias-container"></div>
            <div class="pagination"></div>
        </div>
    </div>
</div>
`
@alexisgrow alexisgrow mentioned this issue May 7, 2020
Merged
@alexisgrow alexisgrow self-assigned this May 7, 2020
alexisgrow added a commit that referenced this issue May 18, 2020
@alexisgrow
FilterBox: Add null check to filter event listener (#768)
2775222 
When using the searchOnChange config option, the reset button is not present, and we get a 'cannot addEventListener of null' error. Since this.config.resetFilters is true by default, implementers will see this error unless they specify false here, which seems incorrect. Adding a guard so that the SDK will only try to bind the click listener if the element exists. Solves this issue: (#509). Also updates README to reflect current behavior.

TEST=manual

Add a FilterBox component with the searchOnChange option, notice error before change. After change, notice that the apply button is missing and clicking options triggers a search.
tmeyer2115 pushed a commit that referenced this issue May 18, 2020
@alexisgrow @tmeyer2115
FilterBox: Add null check to filter event listener (#768)
65f3d3f 
When using the searchOnChange config option, the reset button is not present, and we get a 'cannot addEventListener of null' error. Since this.config.resetFilters is true by default, implementers will see this error unless they specify false here, which seems incorrect. Adding a guard so that the SDK will only try to bind the click listener if the element exists. Solves this issue: (#509). Also updates README to reflect current behavior.

TEST=manual

Add a FilterBox component with the searchOnChange option, notice error before change. After change, notice that the apply button is missing and clicking options triggers a search.
@alexisgrow
Copy link
Contributor

This has been fixed in v1.1.1, closing!

oshi97 pushed a commit that referenced this issue May 26, 2020
@alexisgrow @oshi97
FilterBox: Add null check to filter event listener (#768)
8b3c785 
When using the searchOnChange config option, the reset button is not present, and we get a 'cannot addEventListener of null' error. Since this.config.resetFilters is true by default, implementers will see this error unless they specify false here, which seems incorrect. Adding a guard so that the SDK will only try to bind the click listener if the element exists. Solves this issue: (#509). Also updates README to reflect current behavior.

TEST=manual

Add a FilterBox component with the searchOnChange option, notice error before change. After change, notice that the apply button is missing and clicking options triggers a search.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@alexisgrow alexisgrow

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rosiegrant @alexisgrow