Implementing a vertical tabindex change in Material UI Dialogue table

My material UI dialogue contains a table:

<Dialog
      open={open}
      onClose={handleClose}
      maxWidth={'xl'}
      aria-labelledby='scroll-dialog-title'
      aria-describedby='scroll-dialog-description'
      disableBackdropClick
      className={css.root}>
      <IconButton className={css.closeButton} aria-label='close' onClick={handleClose}>
        <CloseIcon />
      </IconButton>
{data?.isdata ? (
 <div className={css.tableWrapper}>
            <Table aria-label='simple table'>
              <TableHead> // Table header rendering here</TableHead> <TableBody>
                {rows.map((row, index) => (
                  <TableRow key={index}>
                    {row.data.map((item, index) => (
                      <TableCell></TableCell><InputBase></InputBase></Table></div>) : null }
</Dialog

I currently have 5 to 6 input boxes and I want the tab key to navigate vertically instead of horizontally. How can I achieve this?

javascriptcssreactjsmaterial-ui

Answer №1

To implement tab navigation in a table, you can use the tabindex attribute and calculate it based on the row index of the table. In this example, the focus will shift to the 1st column when you hit the tab key (make sure to focus on an input in the 1st column before starting).

const domContainer = document.querySelector('#root')

const e = React.createElement;

function Field ({ tabIndex = 0 }) {
  return e( 'input', { tabIndex })
}

function Row ({ tabIndex }) {
  return e('tr', {}, [ e(Field, { tabIndex }), e(Field) ])
}

function Table () {
  const rows = []
  for (let i = 0; i < 10; i++) {
    rows.push(e(Row, { tabIndex: i + 1 }))
  }

  return e('table', {}, rows)
}

ReactDOM.render(e(Table), domContainer)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered an issue while trying to implement CORS using yarn

Currently experiencing the following issue: Error message: An unexpected error occurred "/home/vagrant/.cache/yarn/v1/npm-cors-2.8.4-2bd381f2eb201020105cd50ea59da63090694686/.yarn-metadata.json: Unexpected end of JSON input". Some important points to c ...

javascriptnode.jsnpmyarnpkg

Tips for presenting a label and its value on separate lines while also displaying additional nested label-value pairs:

I have a specific request in mind, But the result I am seeing is different, Here's the code snippet, I'm utilizing bulma framework but encountering some challenges... <section class="section"> <p>Please verify the details below a ...

htmlcssbulma

CSS: Achieving vertical centering without specifying a fixed height using line-height. Is it possible?

Using line-height to vertically center text within an inline-element is a technique I often employ. Here's a demo I created: body, section { width: 100%; } section { background-color: lightGrey; } #wrap { margin: 30px auto; width: 100%; ...

htmlcss

Attempting to align text around an image within Bootstrap 4

I'm struggling to wrap text around my image at approximately 1355px. I attempted using float-left on both the div container and the img tag, but nothing seems to be working. Could it be due to the column setup I have in place? Should I perhaps add an ...

htmlcssbootstrap-4

Challenge with PHP mail function in sending emails

I run a website and have a "Contact" section where users can fill out a form to reach me. The form is a basic one with its action being a php page. Here is the php code: $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4 ...

phpjavascripthtmlemail

Sorting data by percentages in AngularJS

I am currently facing an issue with sorting percentages in a table column. Despite using methods like parseFloat and other AngularJS (1.5.0) sorting techniques, the percentages are not being sorted as expected. [ {percentage: 8.82} {percentage: 0. ...

javascriptangularjstypescript

Struggling to Incorporate Components into my Higher Order Component (HOC)

Here is the HOC code inside SectionWrapper.jsx: import React from 'react' import { motion } from 'framer-motion' import { styles } from '../styles' import { staggerContainer } from '../utils/motion' const SectionWrap ...

reactjshigher-order-components

Locking Bootstrap 4.3 Navbar at the Page's Summit with a See-Through Effect

I have extensively researched and searched online for information before reaching out here. I hope my question is not redundant. My challenge lies in creating a static navbar at the top of my Bootstrap 4.3 page. Despite multiple attempts, it seems to elud ...

htmlcssbootstrap-4staticnavbar

Distinct headings break up two-columned lists

Is there a way to ensure that the h2 header always stays with its list items, even if the number of list items varies? Currently, the header appears in one column and the lists appear in another column, causing them to be separated when the list count chan ...

htmlcsshtml-lists

Ways to determine if an object contains an array

Looking at the following data structure: [ 13, { a: [ [ '2988.30000', '0.19000000', '1549294216.653040' ] ] }, { b: [ [ '2988.30000', '0.00000000', '1549294216.653774&a ...

javascriptarraysnode.jsobject

Deactivating a Textfield in Material UI while using Formik

I am currently utilizing a reusable Material UI textfield in conjunction with my formik form - <Fieldname="reportType" label="Report Type" disabled as={TextFieldOutLined} /> My objective is to disable the reportType. Despite passing di ...

material-uiformik

Ensure that jquery.load is executed before the HTML content is loaded

Recently, I encountered a situation where I had a bootstrap navbar stored in a separate file, specifically named navbar.html. I utilized Jquery.load() to load this navbar into my HTML page. At the bottom of my HTML page, I included the following code: &l ...

javascriptjqueryhtmlcsstwitter-bootstrap

What steps can I take to incorporate a dropdown feature into my existing menu design?

I am currently working on a navigation menu that includes various subjects. One of the subjects is titled Equipment, and when I hover over it, Throwables and Gear appear. However, I now want to add another dropdown menu that opens when I hover over Throwab ...

htmlcssuinavigationbar

Should we use state or make a GET request on mount in React with REST API?

I am in the process of creating a React-Redux frontend paired with a REST API backend running on Node. I'm debating between utilizing Redux or directly calling the API when the component mounts. This particular component is just a basic list of profi ...

reactjsreduxreact-redux

Positioning an element absolutely inside a Material-UI React dialog

Currently, I am working on a Dialog component that includes a button located in the bottom right corner. When this button is clicked, it triggers the display of another div containing a list of items. However, I have encountered an issue where the list is ...

cssreactjsmodal-dialogmaterial-ui

Is there a standardized method for obtaining a date in the format of six digits as YYMMDD?

In my current project, I'm developing a function that generates a list of dates represented in a 6-digit format beginning from the present day up until August of 2018. The desired output should resemble the following: [190322, 190321, 190320, ...] I ...

javascriptnode.jsdate

Exploring ways to retrieve texture dimensions using Three.js

Can someone please advise me on how to retrieve the dimensions of a texture? I have set my texture using the following line of code: const texture = THREE.ImageUtils.loadTexture(src) Do I need to load the image in order to obtain its dimensions (and can ...

javascriptthree.jstextures

Can storing JWT in the windows object be considered a secure method for easy retrieval when required?

I have received an access token (JWT) in the URL. For example: . Is it secure to save this token in the window object? For instance: window.jwt = Token If so, how can it be utilized (extracting the JWT from the Window object and carrying out subsequent ...

angularreactjs

The word "yargs" will not activate a command within a script

I have a NodeJs script that requires parsing command line arguments. Here is the code I have written: import yargs from "yargs"; import { hideBin } from 'yargs/helpers'; //.... yargs(hideBin(process.argv)).command('--add-item ...

javascriptnode.jscommand-linecommand-line-argumentsyargs

Having difficulty transitioning Paper.js to work with React and Node.js

Trying to integrate paperjs code into a new react application has presented some challenges. In the realm of HTML, I currently have two animation files in paperjs, with each having its own corresponding HTML file. While the following setup works fine in ...

reactjspaperjs