How to Remove Blue Focus Outline from LWC Datatable?

Question

I have created a Lightning Web Component (LWC) that includes a datatable. When I click on a cell in the datatable, it gets focused and displays a blue outline. I would like to remove this focus outline, but so far, I haven’t been successful.

I referred to the SLDS documentation and tried applying the suggested CSS styles both on the datatable class and the cellAttributes. However, none of these approaches worked, and I am unable to figure out the correct solution. Could someone help me identify the appropriate way to remove this focus outline?

Answer

The blue focus outline in the LWC datatable is part of the Salesforce Lightning Design System (SLDS). It is a visual indicator for keyboard navigation and accessibility, ensuring that focused elements are easily identifiable. If you want to remove this outline, there are specific ways to achieve this, depending on your requirements. Below are detailed solutions:

1. Override the SLDS Custom Property

SLDS uses custom properties (CSS variables) to define styles for various components. The focus outline for the datatable cells is controlled by the --slds-g-shadow-inset-inverse-focus-1 property. You can override this property in your component’s CSS file to remove the outline:

:host {
    --slds-g-shadow-inset-inverse-focus-1: null;
}

Adding this CSS inside the :host selector will remove the blue focus outline from the datatable cells. This method works because it directly overrides the SLDS-defined property at the component level.

2. Use a Generic Focus Style

If you want more granular control over the focus styling, you can target the focus state explicitly using custom CSS. For example:

.datatable-class-name:focus {
    outline: none;
}

Replace .datatable-class-name with the class name or selector of your datatable cells. This approach removes the outline entirely or allows you to define a custom focus style.

3. Use ::deep to Target Shadow DOM Styles

LWC uses a Shadow DOM for style encapsulation. If your styles are not applied as expected due to this encapsulation, you can use the ::deep combinator to target elements within the Shadow DOM. For instance:

:host ::deep(.slds-table_cell:focus) {
    outline: none;
}

This ensures that your style overrides reach inside the Shadow DOM of the datatable to remove the focus outline.

4. Alternative Approach with JavaScript (Not Recommended)

If you cannot resolve the issue with CSS, a JavaScript-based solution could work, but it is less efficient and not recommended. You can dynamically remove the focus outline using JavaScript like this:

handleCellFocus(event) {
    event.target.style.outline = "none";
}

Attach this handler to the focus event on the datatable cells. However, use this approach only as a last resort since it mixes styling with logic, which is not a good practice.

Notes on Accessibility

Keep in mind that the blue focus outline serves an important purpose for accessibility. Removing it can impact users who rely on keyboard navigation or screen readers. Instead of completely removing the outline, consider replacing it with a less intrusive style, such as:

:host {
    --slds-g-shadow-inset-inverse-focus-1: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

This way, you maintain accessibility while reducing the visual prominence of the focus outline.

By following these solutions, you can effectively remove or customize the blue focus outline from LWC datatable cells while considering accessibility and maintainability.

Job-Oriented Salesforce Course with Real-Time Projects and Money Back Guarantee

Our Salesforce Course is crafted to deliver a thorough understanding of the Salesforce platform, empowering you with the essential skills to excel in the CRM industry. The program covers critical modules like Salesforce Admin, Developer, and AI, blending foundational knowledge with hands-on practice. By working on real-world projects and practical assignments, you’ll develop the expertise to address complex business challenges with confidence using Salesforce solutions. Our expert instructors ensure you gain both technical competence and industry-relevant insights to thrive in the Salesforce environment.

Along with technical mastery, our Salesforce training in Bangalore provides tailored mentoring, certification guidance, and interview preparation to boost your career opportunities. You’ll have access to a wealth of study resources, practical project experience, and personalized support throughout your learning journey. By the end of the course, you’ll be ready for certification exams and equipped with the real-world skills and problem-solving abilities employers value. Take the first step in your Salesforce career with us and unlock a world of exciting possibilities. Enroll for a Free Demo today!