Hi Dimitrije,
Greetings from Syncfusion support.
Query 1:
Its very easy to reproduce error, it all works good on desktop, however if allow filtering on dropdownlist is allowed and you use a mobile/tabled device the dropdownlist becomes fullscreen on focus/click. When you select a field from a dropdownlist the page reloads.
Response:
We have checked the reported issue and we would like to inform you that in mobile mode, the DropDownList will be opened in another page and the input element will be opened in another page. While pressing the back button, we need to go back to the previous page and save the history.
So, in our source, we used history.back method. If we remove the history.back method from our source, it does not actually navigate to the previous page (Input element page) and simply closes the page. Thus, we override the source to prevent a pop-state event from triggering while selecting the value. Please use the following solution at the sample level to prevent an event from triggering globally for all dropdowns.
|
ngOnInit() {
const popHandler = (e) => {
console.dir(e);
console.log('browser history chanegd.')
};
window.addEventListener('popstate', popHandler, { once: true });
(DropDownList as any).prototype.onMouseClick = function (e) {
let target: Element = <Element>e.target;
let classList: DOMTokenList = target.classList;
let li: HTMLElement = <HTMLElement>closest(target, '.' + 'e-list-item');
if (!this.isValidLI(li)) {
return;
}
this.setSelection(li, e);
if (Browser.isDevice && this.isFilterLayout()) {
var delay = 100;
this.closePopup(delay);
} else {
let delay: number = 100;
this.closePopup(delay);
}
};
} |
Please find the sample from the below link.
Still issue persists, please revert us with issue reproducing sample along with replication scenario that will help us to check and proceed further at our end.
Query 2:
multiselect with checkbox mode also goes fullscreen on mobile devices, which is a bug, but it does not refresh on selection which is good.
Response:
We would like to inform you that, when opening the popup in the mobile mode, it displays in the full screen which is implemented for the better UI experience for the user. So, this is a default rendering mode in the mobile devices.
We can disable this behavior by overriding the popup element style as mentioned below code snippet.
|
onOpen(event) {
setTimeout(() => {
if (Browser.isDevice) {
var parentElement = (this.mulObj as any).overAllWrapper;
event.popup.position = { X: 'left', Y: 'bottom' };
event.popup.width = parentElement.offsetWidth;
event.popup.dataBind();
event.popup.element.classList.remove(
'e-ddl-device',
'e-popup-full-page'
);
event.popup.element.style.top =
parseInt(event.popup.element.style.top) +
parentElement.offsetHeight +
'px';
event.popup.element.style.bottom = 'auto';
event.popup.element.style.maxHeight = (this.mulObj as any).popupHeight;
event.popup.element.querySelector('.e-content').style.maxHeight =
parseInt((this.mulObj as any).popupHeight) - 35 + 'px';
event.popup.element.querySelector('.e-content').style.height =
'initial';
}
});
} |
Query 3:
multiselect on mobile devices does not fire change event when exiting the popup, it fires change event after exiting the popup and clicking anywhere else on the side to clear the focus from it.
Response:
By default, change event will be triggered after focus out the component. This is the default behavior of component. We can change this behavior by disable the changeOnBur property as mentioned below.
|
<ejs-multiselect id='multiselect-checkbox' width="300px" [changeOnBlur]="changeOnBlur"
(open)="onOpen($event)" (change)="onChange($event)" #checkbox [dataSource]='countries'
[placeholder]='checkWaterMark' [fields]='checkFields' [mode]='mode' popupHeight='300px'
popupWidth='300px' [showDropDownIcon]='true' showSelectAll='true'
[filterBarPlaceholder]='filterPlaceholder'>
</ejs-multiselect> |
|
public changeOnBlur = false; |
Regards,
Berly B.C
