DataTable Column with Editable Dropdown as editor has a problem
Posted: 11 Feb 2019, 12:24
I am using Editable Dropdown within a DataTable Column rendered as editor.
This renders the dropdown options and value correctly but the problem is the cursor doesn't remain there
if I want to edit/ key-in the text although focus remains in the dropdown.
Here is what I tried...
When I use the editable dropdown as body it works fine ; I can select or edit the text. See the column with header "Brand - Template".
But cursor jumps when I use the editor column; see the column with header "Brand- Editor".
Is there fix to this problem?
This renders the dropdown options and value correctly but the problem is the cursor doesn't remain there
if I want to edit/ key-in the text although focus remains in the dropdown.
Here is what I tried...
Code: Select all
import React, { Component } from 'react';
import { DataTable } from 'primereact/components/datatable/DataTable.js';
import { Column } from 'primereact/components/column/Column';
import { Dropdown } from 'primereact/components/dropdown/Dropdown';
export default class ScooterTable extends Component {
constructor(props) {
super(props);
this.state = {
myScooters: [
{petname:"tuvi", year:1990, brand:"TVS"},
{petname:"zuvi", year:1995, brand:"TVS"},
{petname:"puvi", year:1998, brand:"TVS"}
]};
this.ScooterBrandTemplate = this.ScooterBrandTemplate.bind(this);
this.onScooterValueChange = this.onScooterValueChange.bind(this);
this.scooterBrandEditor = this.scooterBrandEditor.bind(this);
ScooterBrandTemplate(rowData) {
const scooters = [ {label: 'Suzuki', value: 'Suzuki'},
{label: 'Honda', value: 'Honda'},
{label: 'Bajaj', value: 'Bajaj'},
{label: 'TVS', value: 'TVS'}]
return (
<Dropdown value= {rowData.brand}
options={scooters}
style={{width:'150px'}} editable={true} placeholder="Select a Brand"
onChange={(e) => this.onScooterValueChange(rowData, e.target.value)}>
</Dropdown>
);
}
onScooterValueChange(rowData, value){
rowData.brand = value;
}
scooterBrandEditor(props){
const scooters = [ {label: 'Suzuki', value: 'Suzuki'},
{label: 'Honda', value: 'Honda'},
{label: 'Bajaj', value: 'Bajaj'},
{label: 'TVS', value: 'TVS'}]
return (
<Dropdown value= {props.rowData.brand}
options={scooters}
style={{width:'150px'}} editable={true} placeholder="Select a Brand"
onChange={(e) => this.onScooterValueChange(props.rowData, e.target.value)}>
</Dropdown>
);
}
<DataTable value={this.state.myScooters} >
<Column field="petname" header="Pet Name" />
<Column field="year" header="Year"/>
<Column field="brand" header="Brand - Template"
body={this.ScooterBrandTemplate}
style={{ width: '20%'}}
/>
<Column field="brand" header="Brand- Editor"
editor={this.scooterBrandEditor}style={{ width: '20%'}}
/>
</DataTable>
But cursor jumps when I use the editor column; see the column with header "Brand- Editor".
Is there fix to this problem?