Hi all,
I am trying to implement a text input text with custom dropdown div that can be searched. Everything is working fine except for the dropdown which is getting rendered mostly 300-400 pixels above the actual text block.
I tried debugging everything in the code, referenced the blockly example code for custom fields but no luck.
The issue is most probably somewhere in - showPositionedByField()
which sends a reference to current CustomField.
Has anyone encountered this before? If so, how did you resolve it?
Attached is the screenshot of the issue.
Also, note this issue seems to be also
and also happening with the context menu dropdowns in blockly workspace itself.
Below is a snippet of the implementation:
export class FieldFilter extends Blockly.FieldTextInput{
INITWORDS: any;
WORDS: any;
imageElement_ = null
sourceBlock_ : any
isBeingEdited_ = false
fieldName = ""
constructor(text, options, opt_validate?){
super(text, opt_validate)
this.fieldName = text
this.INITWORDS = options;
this.WORDS = this.INITWORDS;
this.setSpellcheck(false);
this.SERIALIZABLE = true
}
loadState(state) {
if (typeof state === 'string') {
this.fieldName = state
} else {
let words = state['WORDS']
this.WORDS = words
this.INITWORDS = words
if (this.fieldName !== '') {
this.setEditorValue_(this.fieldName);
}
}
}
// editor_
showEditor_(): void {
super.showEditor_();
// Build the DOM.
const editor = this.dropdownCreate_();
Blockly.DropDownDiv.getContentDiv().appendChild(editor);
Blockly.DropDownDiv.setColour(
this.sourceBlock_.style.colourPrimary,
this.sourceBlock_.style.colourTertiary,
);
Blockly.DropDownDiv.showPositionedByField(
this,
this.dropdownDispose_.bind(this)
);
this.boundEvents_.push(
Blockly.browserEvents.bind(this.imageElement_, 'click', this, this.hide_),
);
this.boundEvents_.push(
Blockly.browserEvents.bind(
this.imageElement_,
'mousemove',
this,
this.onMouseMove,
),
);
}
//create dropdown for options
dropdownCreate_() {
this.imageElement_ = document.createElement('div');
this.imageElement_.id = 'field_idFilter';
this.WORDS = this.INITWORDS ?? [];
this.imageElement_.style = this.getDropdownInnerStyle(this.WORDS.length)
this.imageElement_.innerHTML = this.generateDropDownHtml()
return this.imageElement_;
}
onMouseMove(e) {
const bBox = this.imageElement_.getBoundingClientRect();
const dy = e.clientY - bBox.top;
const note = Blockly.utils.math.clamp(Math.round(13.5 - dy / 7.5), 0, 12);
this.imageElement_.style.backgroundPosition = -note * 37 + 'px 0';
this.setEditorValue_(note);
}
Any help is appreciated!
Thanks team.