Dropdownlist in grid header loses focus on mouseup

[Morten Baagøe]

I am trying to display a DDL in the grid headers. And so far everything is working fine except that the dropdown loses focus when I release the mouse over the DDL, but if I release anywhere else there is no problem.

Gif showing the problem

The fact that it works fine when I release outside the <th> elements in which the DDL I located makes me believe that there is some event that results in the DDL losing focus. But I can't seem to find it.

I have included a page to reproduce the problem.

Attachment: Counter_b23e370d.rar

[Monisha Saravanan]

Hi Moten,

Greetings from Syncfusion support.

Query: “the dropdown loses focus when I release the mouse over the DDL, but if I release anywhere else there is no problem.”

We have checked your query and We suggest you to set StopPropagation as true on SfDropdownlist to prevent losing focus. Kindly refer the attached code snippet for your reference.

<GridColumn Field=@nameof(Customer.Id) Width="120">

                        <HeaderTemplate>

                            <div style="padding:20px; margin:20px;" @onclick:stopPropagation="true" >

 

                                    <div class="control-wrapper">

                                        <SfDropDownList TItem="GameFields" TValue="string" PopupHeight="230px" Width="250px" Placeholder="e.g. Basketball"  DataSource="@Games" @ref="@Ref" >

                                            <DropDownListFieldSettings Text="Text" Value="Text"/>

                                        </SfDropDownList>

                                    </div>

                            </div>

                        </HeaderTemplate>

                    </GridColumn>

Kindly get back to us if you have further queries.

Regards,

Monisha