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

This behavior is expected and is related to how Mendix (React client) handles focus management for accessibility. When a page loads, Mendix automatically sets focus to the first focusable element (typically the first element with tabindex="0"). Since custom widgets also receive a default tabindex (usually 0), they are included in the tab order, and the first one gets focused automatically. This is intentional and helps with keyboard navigation and screen reader support, ensuring users have a clear starting point on page load.

There is no direct setting in Mendix to disable this globally. However, you can work around it in a few ways.

If you control the custom React widget, the best approach is to remove it from the tab order:

<div tabIndex={-1}>
  {/* your content */}
</div>

If you want to override focus after page load, you can use JavaScript:

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

Or explicitly focus another element:

document.getElementById("myElement")?.focus();

Another simple workaround is adding a dummy element at the top of the page:

<div tabIndex="-1"></div>

In summary, this is not a bug but expected accessibility behavior in Mendix. To change it, you need to explicitly control focus or tab index in your implementation.

If this resolves your issue, you can mark it as accepted.

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.