search

ng-matero / extensions

Angular Material Extensions Library.
https://ng-matero.github.io/extensions/
MIT License
393 stars 48 forks source link

closeOnSelect not working inside mat-form-field #36

Closed kenclary closed 3 years ago

kenclary commented 3 years ago

Currently can be easily demonstrated by the first example on https://ng-matero.github.io/extensions/components/select/overview

With mtx-select inside mat-form-field, it does not close when you select an item with a mouse click. This behavior does not appear to be affected by [closeOnSelect]="true", etc.

It does appear to do the right thing if you select with the keyboard (e.g. the return key).

It appears to work fine when used without a mat-form-field.

nzbin commented 3 years ago

You can add appendTo="body" to fix, I will release a new version to make this property default.

kenclary commented 3 years ago

That does fix the basic closing behavior, but introduces a number of visual problems to the css. Some of that is probably the fault of my own css, but not all. In particular, there is now extra blank vertical space beneath group labels.

It's also worth noting that body is position: static. And that the visual issues persist if I change it to position: relative.

nzbin commented 3 years ago

I don't quite understand your issue. I have tested mtx-select and mat-select style. In my own project, everything is ok.

Besides, you can check the Ng-Matero select page

kenclary commented 3 years ago

Apologies, this is a bit complicated. Breaking it down:

  1. Setting appendTo by default should at least be documented. It can drastically affect CSS, since it's making the dropdown the child of <body>.
  2. Basic example: the ng-select docs say that the target of appendTo should have position: relative; yet <body> is position: static by default. Though it should be noted that I can't see a difference between the two settings, in regards to how ng-select behaves. This may just be a minor issue with ng-select's docs.
  3. In my case, I'm using material theming, and material typography. Even if I remove my custom styling for ng-select (I needed to adjust some colors), the dropdown is clearly styled differently when using appendTo. This is most noticable with font sizing.
  4. Weirdly, with appendTo="body", in addition to a different font size, the group label (from groupBy) has a huge amount of new vertical space. It looks like there's an entire blank entry below each group label. From playing with the css, it looks likes this results from height: 3em in select.component.scss, and the relative size of 1em being very different between <body> and wherever my <mtx-select> goes.

In summary, I guess, setting appendTo="body" at least has side effects, so it's probably not the best solution. Some of those side effects are visually drastic and unexpected.

kenclary commented 3 years ago

The change you made for 10.4.5 appears to have fixed the issue, at least for me.

nzbin commented 3 years ago

I have removed open event on onContainerClick to fix your issue, but this is not a good solution.

In addition, though appendTo="body" has very small side effects, it's very useful in a dialog. <body> which sets position: static can also work. I think you should improve your own custom style.

kenclary commented 3 years ago

I have removed open event on onContainerClick to fix your issue, but this a not the good solution.

Would it be appropriate for onContainerClick to open the menu if it was closed, or close it if it was opened?

In addition, though appendTo="body" has very small side effects, it's very useful in a dialog. which sets position: static can also work. I think you should improve your own custom style.

The issues I'm having don't appear to be with my custom styles; they appear to be with material typography's styling (and perhaps with mtx-select's scss). However, I think the issue is more that one shouldn't use appendTo without due consideration for the styling effects, so it probably shouldn't be default.

nzbin commented 3 years ago

Would it be appropriate for onContainerClick to open the menu if it was closed, or close it if it was opened?

The issue caused by event bubbling of option clicked, it's very hard to solve with some conditions, maybe it's a bug of ng-select.