Topic: modal closes when keypress enter key on datepicker element
Expected behavior
Datepicker element in Modal window.
Modal window closes When enter key pressed multiple times on date picker element.
Also datepicker is placed in main window when clicking datepicker mutple times.
Two different issues.
Actual behavior
Resources (screenshots, code snippets etc.)
Release Order Effective Date *Release Order Effective Date *
Release Order Effective Date *
Try using the container option to set the container to witch the Datepicker should be added in the DOM Tree: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/6268937 This will solve the problem of the modal closing after pressing the enter key.
I'm not sure what you mean in the second issue. Can you prepare a snippet with examples and describe steps to reproduce this error?
jcarvalho priority commented 2 months ago
Thanks for providing sample. yes. I added container as below. bit when user keep press enter key then it is coming outside the modal.
let options = {
format:'mm/dd/yyyy',
disableFuture: _isDisableFuture,
min: new Date("01/01/1900"),
max: new Date(),
inline: true,
container: '#largeDailog'
}
mdb.Datepicker.getOrCreateInstance($('#'+elementId)).update(options);
'largeDailog' is modal dialog id.
jcarvalho priority commented 2 months ago
Even this not worked. the date picker placed bottom left corner.
$('#mydatepicker').on('keypress' ,function(e){
let keyCode = event.which || event.keyCode;
console.log("Key pressed: " + keyCode + ",id:" + e.target.id);
if( keyCode === 13){
//$("#" + e.target.id).trigger('click');
//e.stopImmediatePropagation();
//e.stopPropagation();
e.preventDefault();
return false;
}
});
jcarvalho priority commented 2 months ago
Even this not worked. the date picker placed bottom left corner.
$('#mydatepicker').on('keypress' ,function(e){
let keyCode = event.which || event.keyCode;
console.log("Key pressed: " + keyCode + ",id:" + e.target.id);
if( keyCode === 13){
//$("#" + e.target.id).trigger('click');
//e.stopImmediatePropagation();
//e.stopPropagation();
e.preventDefault();
return false;
}
});
Grzegorz Bujański staff commented 2 months ago
Can you create a snippet with an example? I tried to reproduce this error using the code you provided, but everything looks fine: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/6270716#js-tab-view
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.1.0
- Device: mac
- Browser: google chrome
- OS: Mac Os
- Provided sample code: No
- Provided link: No