Hi,

The reported behavior was is fixed as of version 9.4.1 of the components therefore we are closing this issue.

Regards,
Vessy
Progress Telerik

Hello, Andrei,

Thank you for the provided example. After further testing and trying various custom implementations I can suggest forcing the TabStrip component to update by triggering a re-render when the container's width changes. This can be done by using a state variable to track the width and updating it through an event listener. Here is a code snippet demonstrating this approach:

import React, { useState, useEffect } from 'react';
import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';

const App = () => {
  const [containerWidth, setContainerWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setContainerWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div style={{ width: containerWidth }}>
      <TabStrip>
        <TabStripTab title="Tab 1">
          <p>Content 1</p>
        </TabStripTab>
        <TabStripTab title="Tab 2">
          <p>Content 2</p>
        </TabStripTab>
      </TabStrip>
    </div>
  );
};

export default App;

Here is the updated example with the approach used above:

• https://stackblitz.com/edit/react-3zy3jnvs-5nrjf2pl?file=app%2Fapp.tsx

This workaround may not perfectly replicate the behavior of the fixed version 9.4.1, as it manually triggers a re-render based on window size changes. It should help mitigate the issue temporarily until you can upgrade.

Please review the approach outlined above and let me know in case the undesired behavior is still observed on your end.

Regards,

Filip
Progress Telerik

Hello, Andrei,

Thank you for the clarification.

Just to make sure I understand the scenario correctly—does the undesired behavior occur only when the width is changed manually, or does it also happen when the width is fixed to a certain value? I created an example with a set width and the scrollable prop, however I was not able to observe the undersired behavior:

https://stackblitz.com/edit/react-3zy3jnvs?file=app%2Fapp.tsx

If the issue is reproduced in the example above can you send me a video which showcases the required steps?

Regards,
Filip
Progress Telerik

Hello, Andrei,

Can you please provide more information on which components you are using? Is the KendoReact Button in a Form or inside the Grid? If possible, can you please send me a runnable example which reproduces the undesired behavior? This will enable me to debug it locally and determine if it is a bug on our side and possibly find a workaround.

Looking forward to your reply.

Regards,
Filip
Progress Telerik