Focus style when focusing on child of custom element

Hi all! A’ve made a custom control for text input, which includes textField.
Is there is a solution to set focus style on custom control itself with enabling to write in child textField. I’ll try to explain better with images)

Custom control
image
Custom control hierarcy
image
StyleSheet
image

So, hover effect works like supposed to


But focus isn’t working as I like him do. Cause, when I click on element, I entering the textField child, and it getting focused instead of custom control itself. If a make focus throght code, then I obviosly loose ability to write text into textField.
So, maybe I can control it somehow in code? To make MDT_TextField:focus work and be able to put text in textField inside?

Hello!

Yeah, in this case, you might want to inherit from TextField instead of using composition, then the states will be more accurate, you could add the icon inside the textfield through code.

If you’d prefer to keep it this way, you could add a class to the parent, when the textField child is focused, and then apply the styles to that class.

textField.RegisterCallback<FocusInEvent>(_=> { this.AddToClassList("focused"); });
1 Like