Primefaces datatable cell edit dropdown problems

Question

I have Primefaces <p:datatable> with cellEdit mode enabled, means when cell is clicked, it changes to editing mode and when you click somewhere else (onblur) cell returns to output mode and calls cellEdit ajax event if its changed.
In datatable editable cells i use <p:selectOneMenu> and <p:autoComplete> with dropdowns. Primefaces generates HTML code of dropdowns outside the cell container, so every time I select something from dropdown, the cell saves value and exits the edit mode, and I need it to stay in edit mode.
I know this works properly with <h:selectOneMenu> , but using other elements is not an option for me.
Is there a way to make cell edit to ignore clicks on drop down?
Or is there a way to prevent that onblur event from firing while drop down is open?

Columns of datatable are dynamic in my case.
I use:
Primefaces 5.3
PrimeFaces Extensions 4.0.0
Mojarra 2.2.9
Wildfly 8

A basic example of this issue:

xhtml:

<h:form id="form">
<p:dataTable id="cars" var="car" value="#{dtEditView.cars}" editable="true" editMode="cell" widgetVar="cellCars">

    <p:ajax event="cellEdit"  />

    <p:column headerText="Car">
        <p:cellEditor>
            <f:facet name="output"><h:outputText value="#{car.title}" /></f:facet>
            <f:facet name="input"><p:inputText value="#{car.title}" style="width:100%" label="Car"/></f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Color">
        <p:cellEditor>
            <f:facet name="output"><h:outputText value="#{car.color}" /></f:facet>
            <f:facet name="input">
                <p:selectOneMenu value="#{car.color}"  style="width:100%">
                    <f:selectItem itemLabel="Red" itemValue="Red" />
                    <f:selectItem itemLabel="Blue" itemValue="Blue" />
                    <f:selectItem itemLabel="Green" itemValue="Green" />
                </p:selectOneMenu>
            </f:facet>
        </p:cellEditor>
    </p:column>

</p:dataTable>
</h:form>

Backing bean:

@ViewScoped
@Named("dtEditView")
public class TestController implements Serializable {
   List<Car> cars=new ArrayList<Car>();

    @PostConstruct
    public void init(){
        cars.add(new Car("BMW","Red"));
        cars.add(new Car("Alfa Romeo","Green"));
    }

    public List<Car> getCars() {
        return cars;
    }

    public void setCars(List<Car> cars) {
        this.cars = cars;
    }
}

Car object:

public class Car {
    String title;
    String color;

    Car(String title, String color){
        this.title=title;
        this.color=color;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getColor() {
        return color;
    }

    public void setColor(String color) {
        this.color = color;
    }
}

Answer 1

I'm not sure if this is directly related, but in Primereact for the same DataTable component, if cell edit and a Dropdown is used together you get the same behaviour when you click the dropdown and select a value in the list, it's interpretted as a click outside of the cell and so edit mode ends without saving the value.

This is rectified by adding appendTo='self' to the Dropdown, making the list appear attached to the dropdown and so to the cell, meaning the click isn't classed as being outside of the cell. Setting this value on the Dropdown results in the expected behaviour of the cell remaining in edit mode.