I did it. Switched it to the new dash_mantine_components.Select and used creatable=True, works a treat now.
It’s very extensible this whole Dash AG Grid thing, love it!
dagfuncs.DMC_Select = class {
// gets called once before the renderer is used
init(params) {
// create the cell
this.params = params;
this.ref = React.createRef();
// function for when Dash is trying to send props back to the component / server
var setProps = (props) => {
if (typeof props.value != typeof undefined) {
// updates the value of the editor
this.value = props.value;
// re-enables keyboard event
delete params.colDef.suppressKeyboardEvent
// tells the grid to stop editing the cell
params.api.stopEditing();
// sets focus back to the grid's previously active cell
this.prevFocus.focus();
}
}
this.eInput = document.createElement('div')
// renders component into the editor element
ReactDOM.render(React.createElement(window.dash_mantine_components.Select, {
data: params.options, value: params.value, ref: this.ref, setProps, style: {width: params.column.actualWidth},
className: 'dbc',
clearable: true,
searchable: true,
creatable: true
}), this.eInput)
// allows focus event
this.eInput.tabIndex = "0"
// sets editor value to the value from the cell
this.value = params.value;
}
// gets called once when grid ready to insert the element
getGui() {
return this.eInput;
}
focusChild() {
// needed to delay and allow the component to render
setTimeout(() => {
var inp = this.eInput.getElementsByClassName('mantine-Select-input')[0]
inp.tabIndex = '1';
// disables keyboard event
this.params.colDef.suppressKeyboardEvent = (params) => {
const gridShouldDoNothing = params.editing
return gridShouldDoNothing;
}
// shows dropdown options
inp.focus();
}, 100)
}
// focus and select can be done after the gui is attached
afterGuiAttached() {
// stores the active cell
this.prevFocus = document.activeElement
// adds event listener to trigger event to go into dash component
this.eInput.addEventListener('focus', this.focusChild())
// triggers focus event
this.eInput.focus();
}
// returns the new value after editing
getValue() {
return this.value;
}
// any cleanup we need to be done here
destroy() {
// sets focus back to the grid's previously active cell
this.prevFocus.focus();
}
}