drop down list selection is closing smart-window

[davout]

In an earlier forum posting I asked whether the ‘smart-window’ component was a good choice for a floating data entry window in my Angular app.   The answer from you was ‘yes’
The basic use case is that the main Angular window is showing a list of entries.  When I select an entry,  the ‘smart-window’ component is displayed to show the details of the just selected entry
I now have a form displaying in the entry details, but I have two problems
First, the form includes a ‘smart-drop-down-list’ towards the bottom left of the form.  If I click on the select button the drop down list appears but it is clipped by the smart window and a vertical scroll bar appears in the smart window
However, the more significant lies with the selection of an item from the smart-drop-down-list.   As soon as I select an item the smart-window is closed.  What I want is for the smart window to stay visible at all times,  until either the form ‘save’ button or the form ‘x’ close window button is clicked.
Any suggestions?
 

[yavordashew]

Hi davout,
I have tried to recreate the situation you have described but I was unable to encounter the problem you described.
I would suggest you to share the code for this particular situation in order to be able to come up with a solution for your case.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[davout]

Hi,
Tracing this further I have found that if a ‘smart-window’ includes a ‘smart-drop-down-list’ inside a form,  then when I change/select a new drop down item then this is generating  ‘smart-window’  level ‘onClosing’ and ‘onClose’ event calls.   Is this a bug?
(I would attach a screenshot, but I can’t find a way of copy/pasting images into this forum message)
It’s no clear from your docs how I would stop a window closing via a ‘onClosing’ event handler.  The code below shows my current handler.

onClosing(event: CustomEvent): void {
  console.log('onclosing ', event);
}
How would I be able to detect 'onClosing' calls that were generated by the drop-down-list versus the smart window itself?

 
 

[davout]

I’ve found that I can use the following code to check what component originated the ‘onClose’ call
onClose($event, fromWindow: boolean): void {
if (($event.srcElement as Element).id === ‘smartWindow’) {
this.taskEditService.hide();
}
}
Is that the best approach?
Also, how do I block closing inside the ‘onClosing’ event handler?

[yavordashew]

Hi davout,
You can use ‘event.target’ to check from where the event is coming from, also you use event.preventDefault() and event.target can be the window or another component that is inside the window that fires the same event.
For example:
onClose(event): void {
const smartWindow = this.smartWindow;
if (event.target === smartWindow.nativeElement) {
event.preventDefault()
}
}
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts