ComboBox IsEditable TabIndex doesn't work

[Will]

I attached a small project illustrating a problem. I have combo boxes and text boxes on the control. When I do not apply any properties on my components and start the application my tab order is perfectly fine. I hit tab and it goes to first combo cox then to cext etc. Exactly the way tab index is set up. But as soon as I add property IsEditable="true" to my combo box it messes it up. When I start application it omits combo box and it goes straight to text box, then it omits another combo box and it goes again straight to text box. Please advice how to fix this tab problem issue. I want to have this editable and have tab index going top down and left right.

Second question. I applied style with ThemeType=telerikControls:Windows8Theme how can I have yellow rectangle around the focused combo box this theme gives gray one which is very hard to recognize.

 <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestTelerikTabStop"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="TestTelerikTabStop.MainWindow"
    xmlns:telerikControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <!-- Please comment in and out IsEditable property to see effect on tabindex
             Please help yelow rectangle on focused combobox in Windows8Theme theme
        -->
        <Style x:Key="RadComboBoxStyle" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerikControls:Windows8Theme, ElementType=telerik:RadComboBox}}" TargetType="telerik:RadComboBox">
            <Setter Property="Height" Value="23" />
            <Setter Property="FontFamily" Value="Calibri"/>
            <Setter Property="ClearSelectionButtonContent" Value="Clear"/>
            <Setter Property="ClearSelectionButtonVisibility" Value="Visible"/>
            <Setter Property="IsEditable" Value="True"/>    
            <Setter Property="IsReadOnly" Value="True"/>
            <Setter Property="Focusable" Value="True"/>
        </Style>
    </Window.Resources>
    <DockPanel DockPanel.Dock="Top">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" MinWidth="265"/>
                <ColumnDefinition Width="Auto" MinWidth="517"/>
                <ColumnDefinition Width="Auto" MinWidth="517"/>
            </Grid.ColumnDefinitions>

            <telerik:RadComboBox x:Name="radComboBox" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" TabIndex="0" IsTabStop="True"  Style="{StaticResource RadComboBoxStyle}" Width="131">
                <telerik:RadComboBoxItem Content="Adam"/>
                <telerik:RadComboBoxItem Content="Alex"/>
                <telerik:RadComboBoxItem Content="Andrew"/>
            </telerik:RadComboBox>
            <telerik:RadComboBox x:Name="radComboBox1" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Left" TabIndex="2" IsTabStop="True" Style="{StaticResource RadComboBoxStyle}" Margin="0,1" Width="131">
            </telerik:RadComboBox>
            <telerik:RadComboBox x:Name="radComboBox2" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" TabIndex="3" IsTabStop="True" Style="{StaticResource RadComboBoxStyle}" Width="143">
            </telerik:RadComboBox>
            <telerik:RadComboBox x:Name="radComboBox3"  Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" TabIndex="5" IsTabStop="True" Style="{StaticResource RadComboBoxStyle}" Margin="0,1" Width="143">
            </telerik:RadComboBox>
            <TextBox  Grid.Row="1" Grid.Column="0" Margin="0,0,134,0" TabIndex="1"/>
            <TextBox  Grid.Row="1" Grid.Column="1" Margin="0,0,374,0" TabIndex="4"/>

        </Grid>
    </DockPanel>
</Window>

[Nasko]

Hi Will,

I will go straight to your questions:

1. Based on the provided description we were able to reproduce the observed by you behavior. So, in order to achieve the desired one you need to set the TabNavigation attached property to "Local" for each RadComboBox - thus the navigation should be working as expected.

2. In order to achieve the desired appearance of RadComboBox when it gets focused you need to modify the default editable Template of the control. By setting the desired BorderBrush for the Border named x:Name="FocusBorder" the desired appearance could be achieved.

We have created a sample project that demonstrates the described above approaches and you could run and evaluate it - please, notice that Implicit Styles have been used.

We hope this will help you.

Regards,
Nasko
Telerik

[Will]

Thank you,

That fixed my issues.

Regards,