Material-ui: [Table] Input not focused inside table

[lucianprobyte]

Problem description

I have an input inside of each TableRow and when I click on it doesn't get focused. This issue is happening in web-kit browsers like Chrome, Opera, Safari. On IE 11 is working well. Here is my code:

{this.state.produseData.map( (row, index) => (
    <TableRow className={"tr "+row.selectat} key={"produs_"+row.id_reper}>
        <TableRowColumn className="td cod-reper">{row.cod_reper}</TableRowColumn>
        <TableRowColumn className="td denumire-reper">{row.denumire_reper}</TableRowColumn>
        <TableRowColumn className="td cantitate-disponibila">{row.cantitate_disponibila}</TableRowColumn>
        <TableRowColumn className="td pret">{row.pret}</TableRowColumn>
        <TableRowColumn className="td dealer">{row.dealer+" / "+row.oras_dealer}</TableRowColumn>
        <TableRowColumn className="td in-cos">
            <div className="controlers">
                <span className="minus" onTouchTap={this.modificaCantitate.bind(null, index, "minus")}>-</span>

                <input type="text" 
                    value={row.cantitate_adaugata} 
                    onChange={this.handleCantitateChange.bind(null, event, index)} 
                    className="cantitate" />

                <span className="plus" onTouchTap={this.modificaCantitate.bind(null, index, "plus")}>+</span>
            </div>
            <div className="addCos">
                <img src="/img/ico-add-cos.png" alt="Add" />
            </div>
        </TableRowColumn>
    </TableRow>
))}

Versions

• Material-UI: 0.15.0
• React: 15.0.1
• Browser: Chrome 51

[yulric]

Hi lucianprobyte,
I was having an issue that I think is similar to your where when I had a TextField inside a table, clicking on it would just focus on the table (i.e. the TextField was not focused and you could not write anything in it). You can circumvent this problem by settings the selectable prop on the Table component to false. Not sure if this helps you.

[aahan96]

@lucianprobyte looks like a solution is available. Closing this issue for now

[yinanfang]

@yulric I came across a similar situation. According to your solution, setting the table selectable prop to false will make the check box on the left unelectable too. What should I do if i still want the check box to be selectable?

[Ridermansb]

@yanisvieilly I have the same problem.. I create a Webpack bin describing that.
Did you solve this?

@aahan96 I think this is not a solution, it's just a workaround, maybe its better to keep this issue opened

Versions

Package | Version
------------ | -------------
material-ui | ^0.17.1
react | ^15.4.2
Browser | Chrome Version 56.0.2924.87 (64-bit)

[kreig303]

Ugh, sign me up for this issue as well... I too am trying to add an input field into the table and want selectable rows.

[dchdimitrov]

Same here. I need the table to be selectable and the input to be usable at the same time.

[eps1lon]

@dchdimitrov Please open a new issue if this still happens in the latest version. We're not supporting version 0.x anymore.