Why are there extra 'volatile' options in my select, and how do I get rid of them?

[jon-p-moore]

https://codepen.io/jon-p-moore/pen/xxQbgjv?value=3

In the above example, the intention is to present the user with a drop-down populated from a hidden editor component (eventually, the editor component will dynamically retrieve the options, and will then be used in multiple places in the page). The selected value is initialised from a URL parameter, if present.

It works OK, except that the dropdown has two extra, disabled options - one blank, and the other containing the text of the mv-default attribute ( [url('value')] ). Both the extra entries have a class attribute with the value mv-volatile.

Why have I got these additional options showing up, and what should I do to get rid of them? How come I'm seeing the code of an expression which should be evaluated (and is being evaluated, since setting the option from the URL parameter is working)?

Thanks,

Jon.

[GalinhaLX]

Hi
Maybe my codepen could help: https://codepen.io/galinhalx/pen/oNEjLJW

[GalinhaLX]

by the way, even if it's not your main question:

<div mv-if="select_value_app.selected_value">
  <h1>Value is selected</h1>
</div>

<div mv-if="!select_value_app.selected_value">
  <h1>Value is not selected</h1>
</div>

must be inside mv-app to be able to work

[DmitrySharabin]

Hey Jon,

How come I'm seeing the code of an expression which should be evaluated (and is being evaluated, since setting the option from the URL parameter is working)?

Unfortunately, it's a known issue (see #741) and is on our radar. I hope it'll be fixed in the next release.

Why have I got these additional options showing up, and what should I do to get rid of them?

For now, as a workaround, I would suggest you programmatically delete those extra options after the corresponding app is ready. The following function (or something similar) should help:

(async () => {
    await Mavo.inited;
    await Mavo.all["APP_NAME"].treeBuilt;
    $$(".mv-volatile").forEach(o => o.remove()); // Or $$(".mv-volatile", $("[mv-app='APP_NAME']")).forEach(o => o.remove());
})();

I made some changes to your pen here.

Btw, @GalinhaLX is right—you need an extra app to make mv-if work.

P.S. You shared an interesting case when you use an existing select as an editor for select. I would never think we could do it. 😊

[jon-p-moore]

Thanks for all the help. Adding @DmitrySharabin's workaround worked for me (locally, couldn't seem to get it working in codepen).

I was surprised when the select editor worked - it doesn't feel as though I provide enough information for it to be hooked up, but it works nicely. It's pretty essential for the kind of applications I deal with at work - very common use cases would be editable tables of information with the same dropdown appearing on each row, based on dynamic data. This sort of works:

<div hidden
        mv-app="chooser_app"
        mv-storage="..."></div>
    <select id="option_chooser" mv-list>
            <option mv-list-item="items" mv-group value="[id]">[name]</option>
    </select>
</div>

...

<tbody mv-list>
    <tr mv-list-item="items">
        <td property="option_id" mv-editor="#option_chooser"></td>
        <td property="id"></td>
        <td property="name"></td>
    </tr>
</tbody>

Only 'almost' because the styling is not consistent - there seem to be 2 styles, one with a conventional dropdown box with an arrow, the other which just looks like a textbox until clicking on it pops up a list of values. I get an inconsistent mix of these - sometimes the conventional dropdown in the first row of the table only, sometimes on all rows. It seems to be dependent on the actual data (so far, it seems that if the current value in the first row is the first value in the list, then only the first row is styled as a conventional dropdown, but that's not a solid conclusion - I'm not at the stage of caring about styles yet, so not digging into it, but it is a bit weird).

Thanks for the hints on the mv-if. That was going to be my next question. I've tried various combinations with the mv-if attribute on the same element as the mv-app, without any joy, so I'm guessing that mv-if has to be strictly inside the app element, which I'll try next.

Is there a convenient way of expressing mv-if=" is not undefined, is not null, and is not the empty string", and its inverse? (As far as I can tell from the docs, I can only use Mavo functions, not Javascript, in expressions, and there's no obvious candidate.

[DmitrySharabin]

It seems to be dependent on the actual data (so far, it seems that if the current value in the first row is the first value in the list, then only the first row is styled as a conventional dropdown, but that's not a solid conclusion - I'm not at the stage of caring about styles yet, so not digging into it, but it is a bit weird).

It is weird, indeed. It would be nice if you could reproduce it and share a reduced testcase with us. It might be a bug we'd like to know about to try to fix it.

As far as I can tell from the docs, I can only use Mavo functions, not Javascript, in expressions, and there's no obvious candidate.

Actually, you can use JS functions in expressions—even async ones. See an example at the end of the page.

Is there a convenient way of expressing mv-if=" is not undefined, is not null, and is not the empty string", and its inverse?

Suppose you have property foo. Then a block with mv-if="foo" will be shown when foo is not null and not an empty string.
On the other hand, a block with mv-if="!foo" will be shown if foo is either null or an empty string.

But I'm not sure what you mean about undefined—do you mean not existing property? IIRC, in Mavo, properties can't be undefined. But I might be wrong. We should probably ask @LeaVerou.

This pen covers different cases. Please, take a look.

[jon-p-moore]

It is weird, indeed. It would be nice if you could reproduce it and share a reduced testcase with us. It might be a bug we'd like to know about to try to fix it.

OK - took a while, but below is a self-contained test case.

Trying a few more times, it was not related to the data - it seemed more random.

To start with, I moved from retrieving data from a remote URL to holding it in div tags, but the problem disappeared. That made me suspect it might be timing-related, so I adapted a test backend I've been fiddling with to put in a delay in loading the data. With the code below, if I repeatedly reload the page, most of the time the select in the top row looks like this:

<select id="select_type" mv-list="" property="items">
  ... same set of option tags ...
  <!--mv-marker-->
</select>

while the rest of them look like this:

<select id="select_type" mv-list="" property="items" class="mv-editor" value="b">
  ... same set of options tags ...
  <!--mv-marker-->
</select>

Just occasionally - or reliably if I comment out the first 2 lines in the get method - they all look like the first version above, but with a value attribute. I don't actually need to put any delay in - just adding the first 2 lines of the get method with a 0 delay makes the problem show up.

Additional weirdness for the value attribute: as far as I can establish, on the top row of the table only, if the current value in the data is the ID of the first option in the list, then the select element is not given a value attribute. The correct value still shows in the dropdown (but that might be because it's the first option). That's a strange one - except when the first option is the value in the first row, there always seems to be a value attribute.

(All in the latest stable version of Firefox for Windows.)

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
        <script src="https://get.mavo.io/mavo.js"></script>
        <script>
            // Simple backend for testing Mavo.
            Mavo.Backend.register(class TestBackend extends Mavo.Backend {
                id = "Debugging"

                constructor (url, o) {
                    let realUrl = url.substring(5);
                    super(realUrl, o);
                    this.permissions.on(["read", "edit", "save"]);
                    this.constructor.useCache = false;
                    this.delay = o.delay || 0; // milliseconds
                    this.cachedData = 
                            JSON.stringify(
                                {
                                    "items" :
                                        [{"id":"001","type_id":"a","name":"Entity 5"},
                                        {"id":"002","type_id":"b","name":"Entity 1"},
                                        {"id":"003","type_id":"b","name":"Entity 2"},
                                        {"id":"004","type_id":"c","name":"Entity 4"},
                                        {"id":"005","type_id":"c","name":"Entity 3"}]
                                });
                }

                async get (url = new URL(this.url)) {
                    console.log("Sleeping for " + this.delay + " milliseconds");
                    await new Promise(r => setTimeout(r, this.delay));
                    console.log("Getting backend data." + this.cachedData);
                    return this.cachedData;
                }

                async put (serialized, path) {
                    console.log("Putting data " + serialized);
                    this.cachedData = serialized;
                    return serialized;
                }

                static test (value) {
                    return value.startsWith('test:');
                }
            });
        </script>
    </head>
    <body>
        <div hidden
            mv-app="types_app"
            mv-storage="#types">
            <select id="select_type" mv-list>
                    <option mv-list-item="items" mv-group value="[id]">[name]</option>
            </select>
        </div>

        <div mv-app="entities_table"
             mv-storage="test:"
             mv-delay="0"
             mv-mode="edit">
            <table border="1">
                <thead>
                    <tr>
                        <td>Type</td>
                        <td>ID</td>
                        <td>Name</td>
                    </tr>
                </thead>
                <tbody mv-list>
                    <tr mv-list-item="items">
                        <td property="type_id" mv-editor="#select_type"></td>
                        <td property="id"></td>
                        <td property="name"></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div id="types">
            [{"id":"a","name":"Type A"},
            {"id":"b","name":"Type B"},
            {"id":"c","name":"Type C"}]
        </div>
    </body>
</html>

[LeaVerou]

If the docs give the impression people can't use regular functions in there, we should fix the docs.

Is there a convenient way of expressing mv-if=" is not undefined, is not null, and is not the empty string", and its inverse?

mv-if="foo" will do exactly that (also covers false).

[jon-p-moore]

If the docs give the impression people can't use regular functions in there, we should fix the docs.

I'm a doc reader - I read through it all before starting. What I got from the expressions page was:

Mavo’s expression syntax is called MavoScript.

... and I can use it in square brackets by default, and without brackets in some Mavo-specific attributes.

Mavo defines a number of useful functions you can use inside expressions ...

... so this looks like a restricted syntax. Why pow() and sqrt(), when Javascript (presumably) has those?

Mavoscript is based on a subset of JavaScript, ...

... ah, OK, so I don't get all of Javascript, just a subset.

I missed

If you need something more advanced, you can invoke custom JavaScript functions (both synchronous and asynchronous) in your expressions. Function calls are perfectly valid MavoScript.

... because that section is labelled 'Advanced', and I'm not a Javascript developer - I thought that section was just clarifying the differences and what the restrictions are from using only a subset of Javascript.

So fair enough, it's there, but it's in a section I'd certainly skip on first reading, and probably not come back to because it doesn't seem that important.

Not being a Javascript developer (well, not for 20 years or so), I have encountered problems stemming from "undefined" != "null" != "", but I don't really know where undefined vs null crops up - hence my question above.

[LeaVerou]

Fair enough — we assumed that if anyone was able to use JS functions, they'd read the "Advanced" section (which is targeted at people who can write JS), but I guess it's not clear how "Advanced" is defined. Maybe we need a note in the non-advanced section. Or to define "Advanced" better.

Why pow() and sqrt(), when Javascript (presumably) has those?

Because novices may find them easier than Math.pow() and Math.sqrt() (which require understanding the whole idea of namespaces, dot notation etc) and may be familiar with similar functions from spreadsheets. For exponentiation, we could define an operator, but not sure if it's best to be consistent with JS (**), spreadsheets (^), or both.

... ah, OK, so I don't get all of Javascript, just a subset.

based on a subset. It also includes syntax that is not valid JS (several operators (e.g. and, where, & etc), and certain things that would produce errors in JS, don’t (since Mavo tries to be as permissive as possible, closer to HTML’s error handling than JS).

[jon-p-moore]

Mea culpa - I missed it, but it might be clearer to have something further up the page, for people like me, who don't want to write Javascript, but will do so if we really must. :-)

based on a subset. It also includes syntax that is not valid JS (several operators (e.g. and, where, & etc), and certain things that would produce errors in JS, don’t (since Mavo tries to be as permissive as possible, closer to HTML’s error handling than JS).

Isn't that a superset? Or is there also some JS syntax that isn't supported?

[LeaVerou]

It's not a superset, it only supports expression-level syntax, i.e. no functions, control flow blocks, modules, classes etc.