SlInputs on SlDialogs broke sometime after 27 - April

[dahoward]

Erik,

Don Howard here. I'm using CP for a web application I'm creating as a volunteer for a local St Paul, MN chapter of Cycling Without Age. I'm very impressed with CP and progressively learning more and getting more adept.

For now, I have one issue I want to raise that you would probably have ready insight into. I am using SlDialogs with SlInputs on them (also SlSelects on them). I noticed that sometime within the branches of the last month, the SlInputs on SlDialogs stopped working--they don't accept focus. I repeated this loading latest branch as of today (27-May), opening the Shoelace demo app, clicking the Dialog button, clicking Focus Dialog, then attempting to put focus in an input to type something.

I then loaded branch "28da6ffd691ed7349c9098f32e0ca93ef69541a4" from 1-April, redid the same steps as above and the SlInput on the SlDialog works.

Would you mind looking into that? Will look forward to reconnecting with you in a broader sense later.

[ErikOnBike]

Hi Don.

I'll look into this. Not aware of any issues, but I'm using Shoelace in special context. Might be something I'm therefore not aware of. I'll let you know my findings.

Cheers, Erik

[ErikOnBike]

Hi Don,

I just tried it out on a clean image and I have no problems. Did you pull the latest CP-ClientEnvironment (besides CodeParadise)? Or in case you simply copied the html content, did you update these? In CP-ClientEnvironment you have the latest VM, the plugins and the tiny Smalltalk image that runs in the browser. Sometimes a small update needs to made there. I skimmed the change log of both CodeParadise and CP-ClientEnvironment but nothing really stands out.

If you're up-to-date on CP-ClientEnvronment, please provide OS and browser (incl. version numbers). I tried on macOS (Monterey) and Safari and Firefox (most recent).

Cheers, Erik

[dahoward]

Thank you, Erik, for your kind response. I will do some detective work with your suggestions and let you know what I find out.

Best Regards, -Don

[dahoward]

A little more detective work revealed that with latest CP and Client Env, a SlInput on a SlDialog works on FireFox 100.0.2 but not on Safari 13.1.2 for High Sierra 10.13.6. I also found the branch that caused the SlInput on the SlDialog to stop working: the last push of 29-Apr which took Shoelace from 2.0.0-beta.64 to 2.0.0-beta.73. Do you think that means beta73 has some issues relative to Safari 13.1.2 which means isolating and reporting to the Shoelace team? There are several other ways to get past this, of course, including not using SlDialog/SlInput or not supporting Safari on old Macs which, personally, I'd be a bit sad if it has to go that way not to mention there may be a meaningful number of people out there using Safari on vintage Macs. Your thoughts? Thanks.

[ErikOnBike]

Don, just to clarify things for me: does the input receive focus and 'only' does not show the fact it has focus? OR is it actually not receiving any focus (ie you can't type anything into the input field)? The first thing can probably be fixed using some CSS, the later might be something to report to Cory (the Shoelace dev). He is very helpful and supportive. AND he also wants to keep a modern lib and I think he will not change components for backward compatibility (personal experience ;-). He might have suggestions to fix things though. I had a similar experience with the way the focus ring is shown on buttons (didn't work on some of my browsers), but had to fix it in my own CSS. (Reminding me of this issue made me wonder whether you are actually experiencing non-working focus or non-visible focus).

To fix 'only' the showing of focus you could add the following to the initialization method of your WebClientBehavior (or if you use the default, to some other client side code). I added both sl-input and sl-button, but maybe other components need to be 'fixed' in a similar way:

    CpHtmlDocument documentHead
        appendChild: ((CpHtmlElement newWithTag: #style)
        textContent:
            'sl-input::part(input):focus {
                box-shadow: var(--sl-focus-ring);
            }
            sl-button::part(base):focus {
                box-shadow: var(--sl-focus-ring);
            }' ;
                yourself).

I do not have an older Safari lying around so it is hard for me to check what could fix this. Please let me know your progress.

[dahoward]

It's the latter case--"actually not receiving any focus (ie you can't type anything into the input field)".

Under the latest CP, the inputs work correctly on Safari when they are not a child of a SlDialog. In other words, the inputs on the "Inputs" button of the Shoelace Examples allow proper focus and typing of characters into the field.

Could there be a conflict between SlDialog and its child SlInput in old-Mac Safari? My app also uses a SlSelect on the SlDialog and that's working fine.

[ErikOnBike]

Hi Don. I might have found something. I had an event listener installed on SlFormControl (missed it on previous scan through the code) which was there to prevent a pointer down event from bubbling up (to prevent a Windows receiving a click event resulting in the Window resetting focus). In your Safari version this was handled differently than I expected. And actually this prevention mechanism should not be there in the first place. So I changed the way setting focus on a Window is done. Hopefully this fixes things. Could you do a pull and test it? I do wonder what happened in Shoelace that made the behaviour change between versions. I didn't see anything change in either sl-input or sl-dialog that looked 'suspicious' in relation to this issue and my finddings. But anyway, I think it was something in CodeParadise and not in Shoelace. Let me know if this change fixed it. HTH

[dahoward]

Dang, that didn't work. Started from a new P8 image, loaded latest CPClientEnv then CP, then started up Shoelace Demo app going to dialog box with inputs on it--same problem on Safari 13.1.2 of no ability to enter into and type characters on the inputs on the dialog.

Interestingly, when I change the Shoelace version back to 2.0.0-beta64 inputs on dialogs work properly on Safari 13.1.2.

So it's somehow in the interaction of 1) Safari 13.1.2 (13609.3.5.1.5), 2) Shoelace 2.0.0-beta73 and 3) a sl-input on a sl-dialog.

I appreciate your help on this. I can work around the problem for Safari 13.1.2 by staying on Shoelace 2.0.0-beta64 which I doubt would impact me much, if at all.

[ErikOnBike]

Bummer. Is there any message in the browser (dev) console? (Should have asked this before). I'll try to see if I can find someone 'around' with that same version of Safari. In the meantime please use the older version of Shoelace. That is not a future proof solution, but gives a little time to try and find the real problem.

[ErikOnBike]

Don. I have been able to reproduce the issue on a different computer. I couldn't pinpoint what caused it unfortunately. Tried to change a few things and/or tried to set the focus from code (instead of clicking on it), but to no avail. The issue also arises outside CodeParadise (see https://shoelace.style/components/dialog?id=customizing-initial-focus). So it does not seem CodeParadise specific. You could contact the developer(s) on Shoelace to see if they can help out. Either by creating a GitHub issue or starting a discussion. I hope someone can help out. I'm closing this issue shortly because it seems not specific to CodeParadise.

[dahoward]

That sounds good. I will work it through Shoelace bug channels later after I get chunks of my work out the door. Thanks so much for your help. I look forward to doing what I can to add value to CodeParadise.