Hi. I’m using a custom editor based on TextEditor and the context menu I define for HoT does not appear when right clicking on a cell where the custom editor is active. How do I make the right click context menu work for custom controls as well?
Below is partial code for the custom editor:
class MaskedEditor extends Handsontable.editors.TextEditor
{
createElements()
{
super.createElements();
this.TEXTAREA = this.hot.rootDocument.createElement(‘input’);
…
}
}
Hi @dan.rhodes
Thank you for contacting us. In such case I will need to see a code demo with your implementation to determine what can be wrong. In general adding a custom editor shouldn’t alter the behavior of the context menu, and it should be still globally available.
Implementation of what precisely? Its a huge closed source project so I can’t show much of it here.
The custom editor is based on a code sample your support provided awhile back and applies iMask.JS to the textarea. The custom editor class itself doesn’t do much other than set properties of that text area.
Below is the code for the custom editor.
class MaskedEditor extends Handsontable.editors.TextEditor
{
private mask:_InputMask<FactoryArg>|null = null;
prepare(row: number, col: number, prop: string | number, td: HTMLTableCellElement, originalValue: any, cellProperties: Handsontable.CellProperties)
{
super.prepare(row, col, prop, td, originalValue, cellProperties);
const iMaskOptions = cellProperties.iMaskOptions;
if (this.mask != null)
{
this.mask.destroy();
this.mask = null;
}
if (typeof iMaskOptions === "object")
{
this.mask = IMask(this.TEXTAREA, iMaskOptions);
}
}
createElements()
{
super.createElements();
this.TEXTAREA = this.hot.rootDocument.createElement('input');
this.TEXTAREA.setAttribute('data-hot-input', true); // Makes the element recognizable by HOT as its own component's element.
this.textareaStyle = this.TEXTAREA.style;
this.textareaStyle.width = 0;
this.textareaStyle.height = 0;
this.TEXTAREA_PARENT.innerText = '';
this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
const style = this.TEXTAREA.getAttribute("style") ?? "";
this.TEXTAREA.setAttribute("style", style + " background-color:yellow;");
}
}
Here is a simplified copy of the Handsontable element:
<HotTable ref={hot}
id={hotIdentity}
licenseKey={HOT_LICENSE_KEY}
className="full-size"
data={sheetData}
colHeaders={false}
colWidths={colWidths}
rowHeaders={false}
rowHeights={rowHeights}
cell={sheetCells}
allowInsertColumn={false}
allowInsertRow={false}
allowRemoveRow={false}
autoColumnSize={false}
autoRowSize={false}
//contextMenu={false}
mergeCells={mergeCells}
selectionMode={'single'}
contextMenu=
{
{
items:
{
'custom-undo':
{
name: 'Undo changes',
disabled()
{
return false; // Simplified
},
callback: function()
{
// Do stuff
}
},
'custom-reset':
{
name: 'Reset to default',
hidden()
{
return false; // Simplified
},
callback: function()
{
// Do stuff
}
}
}
} as ContextMenuSettings
}
/>Hi @dan.rhodes
Thank you for the code. I wasn’t able to make it fully work with iMask.JS so I checked it with the basic implementation of the input editor, but I wasn’t able to find anything that might cause the context menu not to open.
https://jsfiddle.net/handsoncode/venmk2q7/
Can you please modify the example above so the issue can be replicated there?
That link doesn’t work, opens a blank tab.
There are many thousands of lines of code that go into creation and configuration of the HoT table.
The application is completely dynamic and everything is configured via complex metadata so there is a lot of code that does dynamic layout and configuration. Plus I have like 15 HoT hooks to get the proper interactivity and behavior. All of that, for a single web page containing this HoT table, is driven by megabytes of metadata coming from a database that determines how that particular page should appear. Trying to recreate the exact same thing in a demo could take a very, very long time - I’d basically have to recode everything in a simplified from.
So how about we try a more practical approach. How does the context menu get assigned? Is it a single event, multiple events? Can I just apply the necessary assignment/configuration to the TEXTAREA HTML element in the createElements function? This system is supposed to be ready for testing next week, I don’t have extra time.
Hi @dan.rhodes
I understand. Maybe it would be best to schedule a quick call to check this issue? We have time on this Friday. If you are interested let me know about your time zone and availability at support@handsontable.com
Hi Adrian,
This is Dan Rhodes. I’m the Dev manager at Pennymac who set up our Handsontable licenses and account. You’ve been chatting with James Higgins, the developer building the system. We have two licenses, but have only one developer using it at this time.
We would like to set up a call to discuss the issue and show our relevant code to solve the problem.
We are in US PST and MST time zones, so it would be best to schedule it as late on Friday as you’re available.
We can adjust as needed. You can set up the call or let me know a good time and I’ll set up a Zoom.
CET UTC +1
PST UTC -8
MST UTC -7
Thanks
Hi @dan.rhodes
Unfortunately, tomorrow we are available only during the morning hours our time, so that will be in the middle of the night your time.
if you could share just minimal demo showing the issue that would help us a lot to determine the issue, if it’s related strictly to the iMask.JS and context menu not opening.
Hi Adrian,
As James mentioned above, setting up even a minimal demo in jsfiddle would take considerable time and effort that we can’t spare at this time. We can work around the issue for a few days, but we will need to get it resolved soon. Can we set up a time to meet next week?
Hi @dan.rhodes
I understand. We have a free spot on Monday at 3 PM CET, which would be 7 AM MST. Would that time work for you?
I (James) can do 7AM MST Monday (today). Sorry for the late reply, wasn’t checking over the weekend.
Hi @dan.rhodes
Thank you for the confirmation. Can you please write a message at support@handsontable.com? I will send you a link to the meeting then.
Email sent from James Higgins.
I got it and I sent the invitation. Thank you.