focus is wrong when trying to click inside a RadComboBox

Question

So i have a RadCombobBox which is heavilly edited to have a list of options where 1 of the options can be an input field. There are different types of input fields you can chose from but i'm having a problem with the integer input field. There's also one with a text input field which shows no problems.

The combobox looks like this:

The text is dutch (don't mind it) beneath the text options there is a preset value, the idea here is you can either choose a preset setting (which corresponds to an integer value) or you can type in your own value.

What happens when i try to click on different places (last one is very peculiar):

• If i try to click on the input box (which is highlighted in gray) it selects it and closes the combo box (this is not what i want).
• If i try to click on the arrows on the right side of the combobox it changes the value.
• If i scroll with my mouse, it changes the value.
• If i keep my mouse down on the input box i can actually type in the value i want.
• If i first click on the buttons on the side and then click inside the input box i can edit the value.

What I want is to click on the input box and be able to edit the value inside and when i'm finished press enter (or outside the combobox) to close it.

Somehow the focus or, something (i am not 100% sure) just seems to fail me. here is the xaml code for the IntegerDataTemplate:

Integer selector

<Style x:Key="NumericUpDownStyle" TargetType="{x:Type telerik:RadNumericUpDown}">
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
        </Trigger>
        <Trigger Property="IsEditable" Value="False">
            <Setter Property="SmallChange" Value="0" />
            <Setter Property="LargeChange" Value="0" />
        </Trigger>
    </Style.Triggers>
</Style>

<!--  Integer editor  -->
<DataTemplate x:Key="IntegerDataTemplate">
    <telerik:RadNumericUpDown x:Name="NumericUpDown"
                              Width="{Binding Path=ActualWidth,
                                              ElementName=Editor}"
                              MaxWidth="{Binding Path=ActualWidth,
                                                 ElementName=Editor,
                                                 Converter={StaticResource WidthToWidthConverter}}"
                              HorizontalContentAlignment="Left"
                              Background="Transparent"
                              FontFamily="{telerik:Windows8Resource ResourceKey=FontFamilyStrong}"
                              IsInteger="True"
                              Style="{StaticResource NumericUpDownStyle}"
                              UpdateValueEvent="PropertyChanged"
                              Value="{Binding Path=Value,
                                              UpdateSourceTrigger=PropertyChanged,
                                              NotifyOnSourceUpdated=True}">
        <telerik:RadNumericUpDown.NumberFormatInfo>
            <globalization:NumberFormatInfo NumberGroupSeparator="" />
        </telerik:RadNumericUpDown.NumberFormatInfo>
    </telerik:RadNumericUpDown>
</DataTemplate>

<!--  Integer as Option  -->
<DataTemplate x:Key="OptionsDataTemplate">
    <TextBlock Height="20" Text="{Binding Converter={StaticResource IntegerSelectorObjectToStringConverter}}" />
</DataTemplate>

<local:SelectorTypeTemplateSelector x:Key="IntegerTemplateSelector"
                                    OptionsDataTemplate="{StaticResource OptionsDataTemplate}"
                                    SelectorDataTemplate="{StaticResource IntegerDataTemplate}" />

Somewhere it is going wrong, is there anyone that can point me to the right way to fix it (a work around would be fine as well).

I would like to add I have the same code but with a text box which does work properly, I've added the code below to have a comparison but i haven't been able to find a significant difference.

Text selector (which actually works properly)

<Style x:Key="TextBoxStyle" TargetType="{x:Type telerik:RadWatermarkTextBox}">
    <Setter Property="BorderBrush" Value="{StaticResource BasicBrush}" />
    <Setter Property="FontFamily" Value="{telerik:Windows8Resource ResourceKey=FontFamilyStrong}" />
    <Setter Property="Padding" Value="2,2,0,0" />
    <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ErrorTemplate}" />
    <Setter Property="telerik:RadWatermarkTextBox.WatermarkTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBlock Margin="2,3,0,0"
                           FontFamily="Segoe UI"
                           FontStyle="Italic"
                           Foreground="{StaticResource WaterMarkBrushNoOpacity}"
                           Padding="0,-2,0,0"
                           Text="{Binding}" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
        </Trigger>
        <Trigger Property="IsReadOnly" Value="True">
            <Setter Property="BorderBrush" Value="{StaticResource MarkerDisabledBrush}" />
        </Trigger>
    </Style.Triggers>
</Style>

<!--  String editor  -->
<DataTemplate x:Key="StringDataTemplate">
    <telerik:RadWatermarkTextBox x:Name="WatermarkTextBox"
                                 HorizontalAlignment="Stretch"
                                 HorizontalContentAlignment="Stretch"
                                 VerticalContentAlignment="Top"
                                 Background="Transparent"
                                 BorderThickness="1"
                                 Style="{StaticResource TextBoxStyle}"
                                 Text="{Binding Path=Value,
                                                UpdateSourceTrigger=PropertyChanged,
                                                NotifyOnSourceUpdated=True}" />
</DataTemplate>

<!--  String as Option  -->
<DataTemplate x:Key="OptionsDataTemplate">
    <TextBlock Height="20" Text="{Binding Converter={StaticResource StringSelectorObjectToStringConverter}}" />
</DataTemplate>

<local:SelectorTypeTemplateSelector x:Key="StringTemplateSelector"
                                    OptionsDataTemplate="{StaticResource OptionsDataTemplate}"
                                    SelectorDataTemplate="{StaticResource StringDataTemplate}" />

Answer 1

It's really difficult to know what's going on without actually fiddling around with all the bits and pieces (e.g. the RadComboBox style + code), but it would be natural to assume that is has something to do with the drop down automatically closing when it loses focus, especially given that the standard WPF ComboBox has a FocusedDropDown state which opens the popup.

You could try and duplicate the RadComboBox by importing the style from Telerik, and extending the code behind into a new class (and restyle with the imported template). This way you can override methods and attach to events (e.g. Got/LostFocus), and play around with the template to see if you can adjust it to your needs.

However trying to wrestle such behavior into existing controls, just because it is possible to restyle the templates, often just ends up in a lot of grief (and hours wasted).

I have a feeling it would be easier to create a NumericRadComboBox which has the numeric up/down embedded in the combobox itself. So you restyle the RadComboBox to have numeric up/down buttons next to the drop down arrow, and implement the increment/decrement behavior manually.

Answer 2

The solution was rather simple, I was trying to fix it with preview mouse down but what i needed to do was on preview mouse up by adding: PreviewMouseLeftButtonUp="EditorPreviewMouseLeftButtonUp" in the xaml, which made the RadComboBox code as follows:

telerik:RadComboBox x:Name="Editor"
    BorderThickness="0"
    FontWeight="SemiBold"
    ItemTemplateSelector="{StaticResource IntegerTemplateSelector}"
    PreviewMouseLeftButtonUp="EditorPreviewMouseLeftButtonUp"
                             SelectionBoxTemplate="{StaticResource SelectionboxTemplate}"
    Validation.ErrorTemplate="{StaticResource ErrorTemplate}" />

The code behind looked lik this:

private void EditorPreviewMouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    var originalSource = e.OriginalSource as FrameworkElement;
    if ((originalSource != null) && (originalSource.ParentOfType<TextBox>() != null))
    {
        e.Handled = true;
    }
}

The MouseUp is when the selection changed event is called which causes the combobox to close, by stating the event is finished before that happens it won't close the combobox. All you now have to do is press enter after you've changed the value and it will be selected and updated correctly.