I need Help. my shopping list is not clickable

lucifer6669

so I’m not sure if this is the right area but, I built a module to create a real time editable shopping list. the core is there but I cannot click into the box to add an item. when I check the dev logs it shows no issues and when I exit dev logs it lets me type into the box, but I cannot add the item. once I click out the box I cannot click in it. I’m stumped and even resorted to AI for help with zero luck. what am I missing? any help would be greatly appreciated.

Module.register("MMM-ShoppingList", {
    defaults: {
        initialItems: [] // Initial items in the shopping list
    },

    start: function() {
        console.log("Starting module: " + this.name);
        this.shoppingList = this.config.initialItems;
    },

    getStyles: function() {
        return ["MMM-ShoppingList.css"];
    },

    getDom: function() {
        var wrapper = document.createElement("div");
        wrapper.id = "shopping-list-container";

        var heading = document.createElement("h1");
        heading.innerText = "Shopping List";
        wrapper.appendChild(heading);

        var list = document.createElement("ul");
        list.id = "shopping-list";
        wrapper.appendChild(list);

        for (let item of this.shoppingList) {
            list.appendChild(this.createListItem(item));
        }

        var inputDiv = document.createElement("div");
        inputDiv.id = "add-item";

        var input = document.createElement("input");
        input.type = "text";
        input.id = "new-item";
        input.placeholder = "Add new item...";
        inputDiv.appendChild(input);

        var button = document.createElement("button");
        button.innerText = "Add";
        button.onclick = () => {
            alert("Button clicked");
            this.addItem(input.value);
            input.value = "";
        };
        inputDiv.appendChild(button);

        wrapper.appendChild(inputDiv);

        console.log('Returning wrapper with interactive elements');
        console.log('DOM:', wrapper);

        return wrapper;
    },

    createListItem: function(item) {
        var li = document.createElement("li");
        li.innerText = item;

        var deleteSpan = document.createElement("span");
        deleteSpan.className = "delete";
        deleteSpan.innerHTML = "&#10060;";
        deleteSpan.onclick = () => {
            alert("Delete clicked");
            this.removeItem(item);
        };
        li.appendChild(deleteSpan);

        return li;
    },

    addItem: function(item) {
        if (item === "") return;
        console.log('Adding item:', item);
        this.shoppingList.push(item);
        this.renderShoppingList();
        console.log('Item added:', item);
    },

    removeItem: function(item) {
        console.log('Removing item:', item);
        this.shoppingList = this.shoppingList.filter(i => i !== item);
        this.renderShoppingList();
        console.log('Item removed:', item);
    },

    renderShoppingList: function() {
        var list = document.getElementById("shopping-list");
        if (list) {
            list.innerHTML = "";
            for (let item of this.shoppingList) {
                console.log('Rendering item:', item);
                list.appendChild(this.createListItem(item));
            }
            console.log('DOM updated with new list');
        } else {
            console.log('Error: Shopping list container not found');
        }
    },

    notificationReceived: function(notification, payload, sender) {
        console.log('Notification received:', notification);
        if (notification === "DOM_OBJECTS_CREATED") {
            console.log('DOM_OBJECTS_CREATED notification received');
            this.renderShoppingList();
        }
    }
});

the Dev Log:

Initializing MagicMirror².
translator.js:116 Loading core translation file: translations/en.json
VM4 sandbox_bundle:2 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
  Policy set or a policy with "unsafe-eval" enabled. This exposes users of
  this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
warnAboutInsecureCSP @ VM4 sandbox_bundle:2
translator.js:132 Loading core translation fallback file: translations/en.json
loader.js:178 Load script: modules/MMM-Cursor/MMM-Cursor.js
module.js:489 Module registered: MMM-Cursor
loader.js:151 Bootstrapping module: MMM-Cursor
loader.js:155 Scripts loaded for: MMM-Cursor
loader.js:194 Load stylesheet: modules/MMM-Cursor/MMM-Cursor.css
loader.js:158 Styles loaded for: MMM-Cursor
loader.js:161 Translations loaded for: MMM-Cursor
loader.js:178 Load script: modules/default/alert/alert.js
module.js:489 Module registered: alert
loader.js:151 Bootstrapping module: alert
loader.js:178 Load script: modules/default/alert/notificationFx.js
loader.js:155 Scripts loaded for: alert
loader.js:194 Load stylesheet: vendor/css/font-awesome.css
loader.js:194 Load stylesheet: modules/default/alert/./styles/notificationFx.css
loader.js:194 Load stylesheet: modules/default/alert/./styles/center.css
loader.js:158 Styles loaded for: alert
translator.js:99 alert - Load translation: translations/en.json
translator.js:99 alert - Load translation fallback: translations/bg.json
loader.js:161 Translations loaded for: alert
loader.js:178 Load script: modules/default/clock/clock.js
module.js:489 Module registered: clock
loader.js:151 Bootstrapping module: clock
loader.js:178 Load script: vendor/node_modules/moment/min/moment-with-locales.js
loader.js:178 Load script: vendor/node_modules/moment-timezone/builds/moment-timezone-with-data.js
loader.js:178 Load script: vendor/node_modules/suncalc/suncalc.js
loader.js:155 Scripts loaded for: clock
loader.js:194 Load stylesheet: modules/default/clock/clock_styles.css
loader.js:158 Styles loaded for: clock
loader.js:161 Translations loaded for: clock
loader.js:178 Load script: modules/MMM-WiFiPassword/MMM-WiFiPassword.js
module.js:489 Module registered: MMM-WiFiPassword
loader.js:151 Bootstrapping module: MMM-WiFiPassword
loader.js:178 Load script: modules/MMM-WiFiPassword/qrcode.min.js
loader.js:194 Load stylesheet: modules/MMM-WiFiPassword/MMM-WiFiPassword.css
loader.js:155 Scripts loaded for: MMM-WiFiPassword
loader.js:158 Styles loaded for: MMM-WiFiPassword
loader.js:161 Translations loaded for: MMM-WiFiPassword
loader.js:178 Load script: modules/MMM-ShoppingList/MMM-ShoppingList.js
module.js:489 Module registered: MMM-ShoppingList
loader.js:151 Bootstrapping module: MMM-ShoppingList
loader.js:155 Scripts loaded for: MMM-ShoppingList
loader.js:194 Load stylesheet: modules/MMM-ShoppingList/MMM-ShoppingList.css
loader.js:158 Styles loaded for: MMM-ShoppingList
loader.js:161 Translations loaded for: MMM-ShoppingList
loader.js:178 Load script: modules/default/weather/weather.js
module.js:489 Module registered: weather
loader.js:151 Bootstrapping module: weather
loader.js:254 File already loaded: moment.js
loader.js:178 Load script: modules/default/weather/weatherutils.js
loader.js:178 Load script: modules/default/weather/weatherobject.js
loader.js:178 Load script: modules/default/weather/providers/overrideWrapper.js
loader.js:178 Load script: modules/default/weather/weatherprovider.js
loader.js:254 File already loaded: suncalc.js
loader.js:178 Load script: modules/default/weather/providers/openmeteo.js
loader.js:155 Scripts loaded for: weather
loader.js:254 File already loaded: font-awesome.css
loader.js:194 Load stylesheet: vendor/node_modules/weathericons/css/weather-icons.css
loader.js:194 Load stylesheet: modules/default/weather/weather.css
loader.js:158 Styles loaded for: weather
loader.js:161 Translations loaded for: weather
loader.js:151 Bootstrapping module: weather
loader.js:254 File already loaded: moment.js
loader.js:254 File already loaded: weatherutils.js
loader.js:254 File already loaded: weatherobject.js
loader.js:254 File already loaded: modules/default/weather/providers/overrideWrapper.js
loader.js:254 File already loaded: weatherprovider.js
loader.js:254 File already loaded: suncalc.js
loader.js:254 File already loaded: modules/default/weather/providers/openmeteo.js
loader.js:155 Scripts loaded for: weather
loader.js:254 File already loaded: font-awesome.css
loader.js:254 File already loaded: weather-icons.css
loader.js:254 File already loaded: weather.css
loader.js:158 Styles loaded for: weather
loader.js:161 Translations loaded for: weather
loader.js:178 Load script: modules/MMM-DailyChoreGridColor/MMM-DailyChoreGridColor.js
module.js:489 Module registered: MMM-DailyChoreGridColor
loader.js:151 Bootstrapping module: MMM-DailyChoreGridColor
loader.js:155 Scripts loaded for: MMM-DailyChoreGridColor
loader.js:158 Styles loaded for: MMM-DailyChoreGridColor
loader.js:161 Translations loaded for: MMM-DailyChoreGridColor
loader.js:178 Load script: modules/MMM-Fireworks/MMM-Fireworks.js
module.js:489 Module registered: MMM-Fireworks
loader.js:151 Bootstrapping module: MMM-Fireworks
loader.js:178 Load script: https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js
loader.js:155 Scripts loaded for: MMM-Fireworks
loader.js:158 Styles loaded for: MMM-Fireworks
loader.js:161 Translations loaded for: MMM-Fireworks
loader.js:194 Load stylesheet: css/custom.css
MMM-Cursor.js:24 Starting module: MMM-Cursor
alert.js:42 Starting module: alert
clock.js:43 Starting module: clock
MMM-ShoppingList.js:7 Starting module: MMM-ShoppingList
weatherprovider.js:28 Weather provider: Open-Meteo initialized.
weatherprovider.js:39 Weather provider: Open-Meteo started.
weatherprovider.js:28 Weather provider: Open-Meteo initialized.
weatherprovider.js:39 Weather provider: Open-Meteo started.
main.js:601 All modules started!
MMM-ShoppingList.js:103 Notification received: ALL_MODULES_STARTED
MMM-Fireworks.js:68 Notification received: ALL_MODULES_STARTED
MMM-ShoppingList.js:51 Returning wrapper with interactive elements
MMM-ShoppingList.js:52 DOM: <div id="shopping-list-container"><h1>Shopping List</h1><ul id="shopping-list"><li>flex"Milk"<span class="delete">❌</span></li><li>flex"Eggs"<span class="delete">❌</span></li><li>flex"Bread"<span class="delete">❌</span></li></ul><div id="add-item"><input type="text" id="new-item" placeholder="Add new item..."><button>Add</button></div></div>
MMM-ShoppingList.js:103 Notification received: MODULE_DOM_CREATED
MMM-Fireworks.js:68 Notification received: MODULE_DOM_CREATED
MMM-ShoppingList.js:103 Notification received: DOM_OBJECTS_CREATED
MMM-ShoppingList.js:105 DOM_OBJECTS_CREATED notification received
MMM-ShoppingList.js:93 Rendering item: Milk
MMM-ShoppingList.js:93 Rendering item: Eggs
MMM-ShoppingList.js:93 Rendering item: Bread
MMM-ShoppingList.js:96 DOM updated with new list
MMM-Fireworks.js:68 Notification received: DOM_OBJECTS_CREATED
weather.js:164 New weather information available.
MMM-ShoppingList.js:103 Notification received: CURRENTWEATHER_TYPE
MMM-Fireworks.js:68 Notification received: CURRENTWEATHER_TYPE
MMM-ShoppingList.js:103 Notification received: WEATHER_UPDATED
MMM-Fireworks.js:68 Notification received: WEATHER_UPDATED
weather.js:164 New weather information available.
MMM-ShoppingList.js:103 Notification received: WEATHER_UPDATED
MMM-Fireworks.js:68 Notification received: WEATHER_UPDATED

lucifer6669

@sdetweil @chrisfr1976 you all are amazing. all i had to do was change the fireworks to fullscreen_below and now it all works. the text box is clickable and editable and the chores list sets off the fireworks and i see them. thank you both. i enjoy learning and doing all this.

sdetweil

@lucifer6669 are spans clickable ?

use the developers window, ctrl-shift-i
sources tab
find your code in left nav, then you can step thru the code as it happens

lucifer6669

@sdetweil honestly at this point I have no idea what i’m doing. I have another module chore list that has clickable toggles and button and even activates fireworks once everything is marked done and it works perfectly fine

chrisfr1976

@lucifer6669 Hi,
you’re running this:

loader.js:178 Load script: modules/MMM-Fireworks/MMM-Fireworks.js
module.js:489 Module registered: MMM-Fireworks
loader.js:151 Bootstrapping module: MMM-Fireworks

If is is configured in fullscreen_above you can’t see it but it is there.

I think MMM-Fireworks it can be in fullscreen_behind. But you may need to check if you have a background image that the z-index is correct. You can try to add in the background image css a z-index: -2; and for Fireworks a z-index: -1;. Then start a test for Fireworks. If you can see it, it should be okay and you can click in your list. I’m not sure if this works. This is on my to-check-list :)

sdetweil

@chrisfr1976 fullscreen_below

sdetweil

@lucifer6669 also, you should start w your module only while developing

lucifer6669

@chrisfr1976 thanks. i will try this. i have no issues with the fireworks module firing when my chore list is completed. but it may be interfering with the clickable chore list.

lucifer6669

@sdetweil @chrisfr1976 you all are amazing. all i had to do was change the fireworks to fullscreen_below and now it all works. the text box is clickable and editable and the chores list sets off the fireworks and i see them. thank you both. i enjoy learning and doing all this.

chrisfr1976

@lucifer6669
Hi,
I’ve just fixed that issue in general. I’ve added wrapper.style.pointerEvents = "none"; and p.canvas.style.pointerEvents = "none"; in the module file. This allows pointer events to pass to modules underneath! So also the CalExt3 can be used again with the pop-up windows. I’m also very happy now :-)

Cheers Chris!