material-ui textfield with japanese - material-ui

Question

Excuse my poor English.
'TextField' of material-ui have problem with japanese input.
when use it inside 'Dialog' tag.
First letter is determined without consideration.
for example, entering 'da' should be 'だ', 'pa' should be 'ぱ'.
but it become 'dあ' and 'pあ' because first letter is determined automatically.
when first letter is entered, it should be suspended
until second letter inputted.
does anyone have idea?
import React, { Component } from 'react';
import Dialog from 'material-ui/Dialog';
import TextField from 'material-ui/TextField';
export default class MyModal extends Component {
constructor(props) {
super(props);
this.state = {
question: '',
};
this.onInputChange = this.onInputChange.bind(this);
}
onInputChange(event) {
this.setState({
question: event.target.value,
});
}
render() {
return (
<Dialog
open
>
<TextField
value={this.state.question}
onChange={this.onInputChange}
/>
</Dialog>
);
}
}

Answer 1

I think it's a material-ui bug. I found 2 solutions to work around it.
1: Don't put value state of TextField in Dialog. You should write like below:
class MyForm extends Component {
constructor(props) {
super(props);
this.state = {
question: '',
};
this.onInputChange = this.onInputChange.bind(this);
}
onInputChange(event) {
this.setState({
question: event.target.value,
});
}
render() {
return (
<TextField
value={this.state.question}
onChange={this.onInputChange}
/>
);
}
}
export default class MyModal extends Component {
render() {
return (
<Dialog
open
>
<MyForm />
</Dialog>
);
}
}
2; Or you can extend material-ui TextField with a little fix. This way is pretty dangerous. But it works fine for me now. (I'm using material-ui 0.15.4)
export default class FixedTextField extends mui.TextField {
handleInputChange = (event) => {
if (this.props.onChange) this.props.onChange(event, event.target.value);
}
}