Disable auto focus on first interactive element

0
In a clean page setup with only custom (react) widgets that do nothing with tabindex, the first link of the page gets automatically focused anyway. I have a couple of questions.What is causing this?Can it be disabled?Why does Mendix do this?Mendix allows you to set the tabindex for any component for some reason. The tabindex property (default: 0) always gets added to any (custom) widget even if you do not need this.
asked
2 answers
1

Hi,


This behavior is not coming from your custom React widgets directly, but from how Mendix renders pages in combination with standard browser behavior.

What is causing this?

In Mendix, most interactive elements (links, buttons, inputs) are rendered with a default tabindex (usually 0). This makes them part of the natural tab order.

When the page loads, the browser determines the first focusable element in the DOM. In some cases (depending on structure and timing), the browser will automatically place focus on that first element. Since Mendix ensures components are accessible by default, your first link becomes the initial focus target even if you did not explicitly configure it.

So this is essentially:

  • Standard browser focus behavior
  • Combined with Mendix’s accessibility-oriented rendering

Can it be disabled?

There is no global Mendix setting to disable this behavior, but you can control it in a few ways:

  1. Remove the element from tab order
  2. If the element should not receive focus:

tabIndex={-1}

  1. Manually clear focus on page load
  2. You can use a small JavaScript snippet (via a JS action or inside a custom widget):

setTimeout(() => {
  document.activeElement?.blur();
}, 0);

  1. Set focus explicitly to another element
  2. If you want controlled behavior, assign focus to a specific element after the page loads.

Why does Mendix do this?

This is mainly for accessibility. By ensuring elements are focusable and part of the tab sequence, Mendix aligns with standard web accessibility practices. It helps keyboard navigation and screen reader users interact with the application correctly.

  • This is expected behavior, not a defect
  • It comes from browser focus handling + Mendix accessibility defaults
  • It cannot be turned off globally
  • It can be managed using tabindex, or by controlling focus via JavaScript

In most cases, the recommended approach is to manage focus explicitly rather than trying to completely disable it.


answered
0

The reason is to enable keyboard navigation.

To disbale the tab index set it to a value < 0

Which element get the focus is probably determine by the order in the page elements when the tabindex is the same for the different elements

answered