Hi,
I have smart select inside popup, initially when we open popup and click on smart select then smart select opens properly, but issue is when we select any item then it doesn’t get closed. But second time when we open the same smart select and select any item then it closes properly.
This is working fine for smart select outside popup. This issue is specifically coming in ios. In android it works great.
Please find below code for your reference. and assist with proper solution
<template>
<div class="page no-swipeback">
<div class="navbar">
<div class="navbar-inner">
<div class="custom-gradiant allwidth margin-auto">
<div class="title text-align-center allwidth">
<img class="ios-only logo" src="assets/custom/img/images/logo.png" height="45" alt="" />
<img class="md-only logo" src="assets/custom/img/images/logo.png" height="45" alt="" />
</div>
</div>
</div>
</div>
<div class="page-content">
<div class="color-theme-white text-red custom-header2 padding" style="position:relative;">
{{#js_if "app.data.config.theme.navigation == 'hamburger'"}}
<div class="left display-flex menu-left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="hamburger hamburger--boring">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</i>
</a>
</div>
{{/js_if}}
</div>
<div class="block">
<div class="card margin-bottom">
<div class="card-content card-content-padding">
<div class="list no-hairlines-between">
<ul>
<li>
<div class="item-content">
<div class="item-inner row">
<div class="item-title col-40"> Name</div>
<div class="col-60 text-align-right"> abc</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner row">
<div class="item-title col-40"> Type</div>
<div class="col-60 text-align-right">xyz</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="popup popup-tablet report-popup">
<div class="view view-init">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left ios-only">
<a href="#" class="link popup-close">
<span data-i18n="close">Close</span>
</a>
</div>
<div class="title">Search Reports</div>
<div class="right md-only">
<a href="#" class="link icon-only popup-close">
<i class="icon material-icons md-only">close</i>
</a>
</div>
</div>
</div>
<div class="page-content">
<div class="custom-form">
<form class="list padding-bottom" id="">
<div class="block">
<ul>
<li class="margin-tb20 bg-color-white radius">
<a class="item-link report_type_dropdown smart-select smart-select-init custom-dropdown" style="overflow:visible;" data-open-in="popup" data-virtual-list="true" data-searchbar="true" data-append-searchbar-not-found="No result found." data-searchbar-placeholder="Search Type">
<select class="input-with-value" id="report_type_dropdown" name="report_type_dropdown" required>
<option value="0">Select Type</option>
{{#if reportType}}
{{#each reportType}}
<option value="{{this.reportTypeID}}">{{this.name}}</option>
{{/each}}
{{/if}}t
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">Report Type</div>
<div class="item-after" style="top:5px;"></div>
</div>
</div>
</a>
</li>
</ul>
<div class="block text-align-center">
<input type="button" class="button button-big button-fill bg-color-dblue" value="Submit" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>