paper-dropdown-menu does not closes when click any scrollbars

[mmurugesan]

We are using polymer version 1.9.9 (got this through polymer --version) and TypeScript.

We have 100+ places in our application we used paper-dropdown-menu. Once we clicked the dropdown to expand the item it does not closes as expected if we click / change any scrollbars in the application. If we click any where else other than scrollbars it closes as expected. What could be the reason?

Here is my html code.

<paper-item hidden$="{{hideLabel}}">{{t('Record template for')}} {{label}}

        <custom-dropdown-menu id="materialTypeMenu" label="{{t('Material Type')}}" on-value-changed="onTypeChanged">
            <paper-listbox slot="dropdown-content" class="dropdown-content" selected="{{selectedMaterial}}">
                <template is="dom-repeat" items="{{materialTypes}}">
                    <paper-item value="{{item}}">{{item}}</paper-item>
                </template>
            </paper-listbox>
        </custom-dropdown-menu>

        <template is="dom-repeat" id="materialFieldsTemplate" items="{{materialFieldMapping}}" as="menu" index-as="field_no">
            <custom-dropdown-menu id="field_[[field_no]]" label="{{menu.FromAlias}}" on-value-changed="onFieldChanged" class$="{{computeClass(menu)}}" hidden$="{{menu.Prompt}}">
                <paper-listbox slot="dropdown-content" class="dropdown-content" attr-for-selected="item-name" selected="{{menu.Value}}">
                    <template is="dom-repeat" items="{{menu.Values}}" index-as="material_no">
                        <paper-item id="material_[[material_no]]" item-name="{{item.Value}}" value="{{item.Value}}">{{item.Value}}</paper-item>
                        <paper-tooltip for="material_[[material_no]]">{{item.Value}}</paper-tooltip>
                    </template>
                </paper-listbox>
            </custom-dropdown-menu>
            <paper-input id="txtField_[[field_no]]" class="flex builder-input" label="{{menu.FromAlias}}" value="{{menu.Value}}" on-input="updateCurrentMaterialField" hidden$="{{!menu.Prompt}}"></paper-input>
        </template>
    </div>

Here is my TypeScript code (for custom-dropdown-menu.ts):

import { WindowLocation } from "common/window/WindowLocation"; import { CustomWindow } from "windows/views/custom-window";

const paperDropdownMenuConstructor = window.customElements.get("paper-dropdown-menu") as new () => PaperDropdownMenu; export class CustomDropDownMenu extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior, TranslateBehavior], paperDropdownMenuConstructor) { public static get is() { return "custom-dropdown-menu"; }

public constructor() {
    super();
}

public ready() {
    super.ready();

    this.addEventListener("iron-resize", this.resized);
}

public resized() {
    const dockedArea = this.dockedArea(this);
    const alignment = (dockedArea === WindowLocation.dockRight)
        ? "right"
        : "left";

    this.setAttribute("horizontal-align", alignment);
}

private dockedArea(element: HTMLElement) {
    if (element instanceof CustomWindow)
        return (element as CustomWindow).dockedArea;

    return element
        ? this.dockedArea(element.offsetParent as HTMLElement)
        : undefined;
}

public connectedCallback() {
    super.connectedCallback();
}

} window.customElements.define(customDropDownMenu.is, customDropDownMenu);

Since, it generated multiple dropdowns based on the template the div or parent element will have scrollbar. After expanding any dropdown if I adjust the scrollbar to scroll to see other elements the opened values still appears unless until I click anywhere else (other than the scrollbar). I need to close the dropdown even while adjusting the scrollbar also.

Please note, even instead of using the custom-dropdown-menu, i tried directly using the paper-dropdown-menu also in-place of custom-dropdown-menu. But still facing the same issue.

Please suggest the way that I can fix this.

Thanks in advance.

[mmurugesan]

Here is the attached gif. On this while I moving the scroll it is not closing where it should. While clicking other than scrollbar it closes the menu that is correct.

I want to close the menu while clicking/moving scroll also. Please suggest on this.