Toolbar's button hover does not disappear after clicking

[Pol Maresma]

I have a Grid with some custom toolbar buttons, after clicking one of them it keeps the :hover status and I need to press outside it to remove it.

Any idea of the possible reason?

Thanks :-) 

[Pol Maresma]

I see this is also happening on the demo page.

https://ej2.syncfusion.com/react/documentation/grid/tool-bar/tool-bar

[Rajapandi Ravi]

Hi Pol,

Greeting from Syncfusion support

We would like to inform you that, by default when you click on the toolbar button, we have maintained the focus on that same button. It was the default behavior of Toolbar button in the Grid.

If you like to remove the focus after clicking on that button, we suggest you use the below way to achieve your requirement. Based on your query we have maintained the custom toolbar button and clicking on that button our toolbarClick event gets triggered. In this event, we have invoked the blur() to remove the focus. Please refer the below code example and sample for more information.

 

const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', { text: 'Click', tooltipText: 'Click', prefixIcon: 'e-expand', id: 'Click' }];

 

function toolbarClick(args) { //toolbarClick event of Grid

      if(args.item.text === 'Click') {

        args.originalEvent.target.closest('.e-btn').blur();

      }

    }

 

<GridComponent dataSource={orderDataSource} ref={grid => gridInstance = grid} toolbar={toolbarOptions} allowPaging={true} editSettings={editSettings} pageSettings={pageSettings} toolbarClick={toolbarClick} actionBegin={actionBegin.bind(this)}>

            <ColumnsDirective>

              .  .  .  .  .  .  .  .

              .  .  .  .  . .  . . . .

            </ColumnsDirective>

            <Inject services={[Page, Toolbar, Edit]}/>

          </GridComponent>

 

Sample:  https://stackblitz.com/edit/react-b1ue4h-c4hdmk?file=index.js

API: https://ej2.syncfusion.com/react/documentation/api/grid/#toolbarclick

Regards,

Rajapandi R

[Mary Logan]

As a React developer, I have a few suggestions to help you resolve the problem:

Check Event Handling:  Ensure that the click event on the toolbar button is properly handled, and it's not preventing the default behavior or propagating to parent elements.

CSS Styles: Verify your CSS styles for the toolbar buttons.

Inspect Element: Use browser developer tools to inspect the element after clicking the button.

Event Delegation: If you are dynamically adding or removing elements from the grid, make sure that event delegation is set up properly.

CSS Transitions and Animations: If your CSS includes transitions or animations for the hover effect, make sure that they are not causing unexpected behavior.

Browser Compatibility: Check if the issue is browser-specific.

Grid Configuration: If your grid has specific configurations or settings related to interaction behavior, review the documentation or configuration options to ensure that there are no features causing the hover state to persist.