DataTable Column with Editable Dropdown as editor has a problem

[neetja29]

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...

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>

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?