Materialdesigninxamltoolkit: ComboBox ClearButton not clickable

Created on 6 Dec 2020  路  4Comments  路  Source: MaterialDesignInXAML/MaterialDesignInXamlToolkit

I updated to latest ci build (4.0.0-ci2273) and noticed that you can no longer click on the clear button of comboboxes, if you click it, it opens the combobox popup as if the click is passing thru it. The clear button also has some z-index issues as it appears always on top.

Im assuming this bug was introduced in #2072, and is easily reproducible in the "FieldsLineUp" page in the demo project.

2020-12-06_17-54-56

bug up-for-grabs

Most helpful comment

Fixed with #2193:

  • ComboBox ClearButton not clickable
  • ClearButton gets cropped, but not on ComboBox
  • There are 3 different heights of controls, TextField+PasswordBox, ComboBox, DatePicker+TimePicker

About other issues:

The height of the ComboBox arrow icon is different on each type (filled/floating/default)

I think this is due to the different layouts.

TimePicker clock icon has only 1px padding on the right, everything else has 2px

Looks like this comes from the icon itself. I would not fix this via layout arrangements.

ComboBox arrow icon has no padding on the right

The Padding can be easily set. If the default layout should have padding than this is a design decision, no bug.

All 4 comments

Just to update, the main issue seems to be Panel.ZIndex="1" on the MaterialDesignFloatingHintComboBoxTemplate.Grid.ToggleButton. Removing the ZIndex makes the ClearButton clickable but the ComboBox popup does not work.

While I tried to look for a fix but I also found a few more issues with that PR. I assume that the reason for #2072 was to keep the look of those controls consistent, but they are only kinda consistent for FontSize of 13 and up.

Issues that happen for FontSize 12 and below:

  • ClearButton gets cropped, but not on ComboBox
  • There are 3 different heights of controls, TextField+PasswordBox, ComboBox, DatePicker+TimePicker

Other small inconsistency issues:

  • The height of the ComboBox arrow icon is different on each type (filled/floating/default)
  • TimePicker clock icon has only 1px padding on the right, everything else has 2px
  • ComboBox arrow icon has no padding on the right

2020-12-07_15-58-02

This is really great information! Thank you for digging into it.

I am working on this.

Fixed with #2193:

  • ComboBox ClearButton not clickable
  • ClearButton gets cropped, but not on ComboBox
  • There are 3 different heights of controls, TextField+PasswordBox, ComboBox, DatePicker+TimePicker

About other issues:

The height of the ComboBox arrow icon is different on each type (filled/floating/default)

I think this is due to the different layouts.

TimePicker clock icon has only 1px padding on the right, everything else has 2px

Looks like this comes from the icon itself. I would not fix this via layout arrangements.

ComboBox arrow icon has no padding on the right

The Padding can be easily set. If the default layout should have padding than this is a design decision, no bug.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

wongjiahau picture wongjiahau  路  17Comments

StephanBis picture StephanBis  路  16Comments

rrs picture rrs  路  18Comments

greuelpirat picture greuelpirat  路  12Comments

oSethoum picture oSethoum  路  10Comments