1.23 - filter dropdown menus don't work on iOS

[luckman212]

⚠️ Please verify that this bug has NOT been raised before.

• I checked and didn't find similar issue

🛡️ Security Policy

• I agree to have read this project Security Policy

Description

I know all attention is on 2.0.0 now, so it's ok if this is not applicable anymore...

Just wanted to note that the new status/tag filter dropdown menus are non-functional on iOS (Safari) as far as I can tell. I cannot tap/click/activate them at all.

👟 Reproduction steps

open kuma on mobile Safari

try to click e.g. the Status filter bubble.

👀 Expected behavior

menu opens

😓 Actual Behavior

nothing happens

🐻 Uptime-Kuma Version

1.23.0

💻 Operating System and Arch

ubuntu 20 / Docker

🌐 Browser

Mobile Safari - iOS 16

🐋 Docker Version

No response

🟩 NodeJS Version

No response

📝 Relevant log output

No response

[rezzorix]

Can confirm the same for ios 16.6 with mobile firefox (which technically is safari, too)

[CommanderStorm]

What do you mean exactly by don't work? (what button can't you click?)
Do you by any chance mean #3607?

Is there something written in the log? (if you/somebody else has a mac)

[CommanderStorm]

I forgot to comment on this:

I know all attention is on 2.0.0 now, so it's ok if this is not applicable anymore...

There still will be a patch-release as always (see the 1.23.1-milestone), before #2720 can be merged into master
=> work shifts to the ´2.0.0´-milestone 😉

PRs from those with Apple devices welcome. I don't know if this is testable any other way.

[louislam]

Yes, I just update the changelog a bit:

Update: The last minor version (1.23.x) means that there won't be any new features introduced in v1. However, bug fixes will still be provided. You can expect to see 1.23.1, 1.23.2 and so on.

[luckman212]

What do you mean exactly by don't work? (what button can't you click?)

These:

Do you by any chance mean #3607?

No - not related to that issue

Is there something written in the log?

You mean the log of the uptime kuma instance? No. Mobile browser log? Maybe- I don't know how to access/view that. Maybe I have to browse it while my phone is in some kind of debug mode? I'll check.

[louislam]

Can reproduce on BrowserStack's iPhone device.

[CommanderStorm]

using ios (BrowserStack):
the console does not show relevant errors.

macos ventura - firefox 115 (I don't have macos-safari avalibale anymore. If somebody can verify safari as well, that would be appreciated):

[CommanderStorm]

Seems to be a "feature" of safari ios: https://itnext.io/fixing-focus-for-safari-b5916fef1064

My assumption would be that changing @focusin to @click could work, but how can we listen to the @focusout event?

[luckman212]

I have no idea but I searched a little and found a simple playground on MDN, I added some logging to it and a button, seems to work on my phone...

https://developer.mozilla.org/en-US/play?id=tDaotaNvwKc33Vt8CDIuJb4fHLbgP57V1C4Lq2rpXUqN09I7fORDXtCdduhIKjW%2BnV32mnArodGEGyJW

[CommanderStorm]

Idk, about your example. The following does not work:

https://play.vuejs.org/#eNqNkk1PAjEQhv/KpBcgQThwI2D8CCZ6EKPerAdYBijutk07Rcxm/7uz7YIfIehptzPP++btTEtxaW1vG1AMxchnTlkCjxTsudSqsMYRlA6XFSydKaDFYEtqqTOjPYFxC3QwBgbaL68dqUf9ZMFiPhAWNp8R8glgVDvyZ6G2cLE0WfBKj6WIFj0b/LrdaqpnjLQ6UjSYCXSM4/IejMZsPQ9ERgN9WGRFOh26ADe1DBgoEJQGFje6fkJTvj7X019j90fYOen/hd2Dx+P9Ctd0Y6Af6dIUp3Hwyg+hLJstVFU9/sPIRVeQ5y0t1aq38UbzestaKUVmCqtydFNLircoBZukDFLM8ty838UauYDdfT1bY/Z2pL7xu7omxYNDj26LUhx6NHMrpNSePN3jjv8PzcIsQs70ieYjepOHOmPCroJecOxvXEx7Gx+p0qtnP9kRar+/VB20JqvIS8FP9/rE1b/iDnqDqJO6EtUnuoQLmw==

[luckman212]

I monkeyed around with the playground with some help from chatGPT. This version works on my iPhone, not sure if it can be adapted to Kuma

edit: well, it seems it doesn't behave quite like the example above. 🤷‍♂️

source

<script setup>
import { ref } from 'vue'

const order = ref([])
</script>

<template>
  <p>
  <div tabindex="0" @focus="order.push('focusin-div')" @blur="order.push('focusout-div')">
    <button type="button">
      Focus on me in div
    </button>
  </div>
  <button @focus="order.push('focusin-btn')" @blur="order.push('focusout-btn')" type="button">
    Focus on me in button
  </button>
  </p>
  Order is: {{ order }}
</template>

[CommanderStorm]

That is pretty trippy: The above button works on IOS and the below button works on chrome-linux
What the fuck is going on????

[CommanderStorm]

Should we add both v-on's to the div and the button? (in this code?)

I agree that tis looks+sounds like a horrible plan, but I don't have better ideas

[zluckytraveler]

macos ventura - firefox 115 (I don't have macos-safari avalibale anymore. If somebody can verify safari as well, that would be appreciated)

@CommanderStorm
I can confirm on MacOS Safari v16.5.2 that those dropdown menu filters are not working for me either.

Screen.Record.mp4