Focusing can cause unexpected changes to classname

[peterh32]

Here's a component:

            class Test extends Component {
                bdElements() {
                    return e.div(
                        { className: 'test' }, 'hello',
                        e.button(
                            {bdOn_click: () => {this.bdDom.root.classList.add('clicked')}},
                            'click me',
                        ),
                    );
                }
            }

When you click the button, the test component gets the additional classname clicked.

However, as soon as you navigate away from the button, the classname reverts to just test. The reason is that when you clicked the button, bdOnFocus grabbed the current classname (test) and then added bd-focused to it. Then when you navigate away, bdOnBlur restores the original classname, test, since it does not know that you added clicked in the meantime.

As far as I can tell, the workaround is to use the backdraft methods addClassName and removeClassName for manipulating classnames. However...

1. that's not always handy, and
2. one of the best things about backdraft (as compared to something like reactjs) is that you are allowed to manipulate the DOM directly, with javascript, as opposed to working exclusively through framework methods.

Unfortunately, these classname functions create a tiny bit of the dreaded "shadow DOM," which creates the possibility of conflicts.

I'm wondering if addClassName/removeClassName could work simply by using classList.add() and remove rather than saving and then restoring the "original" classname.

[peterh32]

BTW this is a contrived example but not a contrived case. I had something like this that puzzled the heck out of me for a couple of hours one day, where my classnames kept disappearing!