Hi,
I'm having an issue where the overflow menu in the Toolbar widget doesn't seem to behave correctly with custom widgets. I'm not sure if it's a bug or if I'm not doing something correctly.
The following code adds a custom-button
widget as the last item in the toolbar:
export default class GanttToolbar extends Toolbar {
static get type() {
return "gantttoolbar";
}
static get configurable() {
return {
items: [
{
type: "buttonGroup",
items: [
{
color: "b-green",
ref: "addTaskButton",
icon: "b-fa b-fa-plus",
text: "Create"
}
]
},
{
type: "datefield",
ref: "startDateField",
label: "Project start",
width: "30em",
},
{
type: "textfield",
ref: "filterByName",
width: "30em",
label: "Find tasks by name",
},
{
type: "custom-button"
}
]
};
}
}
class CustomButton extends Button {
static get type() {
return "custom-button"
}
compose() {
return {
text: "Some Text"
}
}
}
CustomButton.initClass();
GanttToolbar.initClass();
The custom-button component does not render correctly in the overflow menu, it looks like this
If I don't override the compose
method in CustomButton
, then it works fine and it looks like this:
So is there a way of overriding the compose method and have it work correctly in the overflow menu?
Thanks