@inject IJSRuntime js

<p>Tab through the textboxes:</p>

<input />

<TelerikTileLayout Columns="2"
                   RowHeight="200px"
                   Resizable="false"
                   Reorderable="false"
                   Navigable="false"
                   Class="tilelayout-tabindex-remove">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Tile 1">
            <Content>
                <p>TileLayout Navigable="false" - will focus the inner textbox and will not focus the tiles.</p>
                <input />
            </Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 2">
            <Content>Tile 2 content.</Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

<input />

<TelerikTileLayout Columns="2"
                   RowHeight="200px"
                   Resizable="false"
                   Reorderable="false"
                   Navigable="true">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Tile 1">
            <Content>
                <p>TileLayout Navigable="true" - will not focus the inner textbox and will focus the tiles. Focus the textbox with Enter when on the tile.</p>
                <input />
            </Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 2">
            <Content>Tile 2 content.</Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

<input />

<script suppress-error="BL9992">

    function removeTabindexFromTiles(selector) {
        var tileLayout = document.querySelector(selector);

        if (!tileLayout) {
            return;
        }

        tileLayout.querySelectorAll(".k-tilelayout-item").forEach(el => {
            el.removeAttribute("tabIndex");
        });
    }

</script>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Task.Delay(1); // ensure HTML is ready
            await js.InvokeVoidAsync("removeTabindexFromTiles", ".tilelayout-tabindex-remove");
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}