Datepicker doesn't work on iPhone without a value

theonelucas commented 4 months ago

Overview of the problem

Oruga latest Vuejs latest OS/Browser: Any browser on iPhone

Description

The Datepicker component does not work on iPhone. I tested on many different devices and resolutions, and it only didn't work on iPhone, regardless of the browser. This issue seems to affect only the inputs that do not contain a value already, the one that do seems to behave correctly.

Reproducing

Open any browser (brave, chrome, safari) on iPhone and navigate to https://oruga-ui.com/components/Datepicker.html
Interact with any example that does not contain a value already, like the second one.
The date selection popup/modal should open when clicking on the input, but it does not.

Expected behavior

The calendar popup should show up when the calendar input is clicked.

Actual behavior

The calendar popup does not show up when the calendar input is clicked.

mlmoravek commented 4 months ago

Hmm it works on Android. I will check further...

mlmoravek commented 4 months ago

I can confirm this problem. It's inside the internal PickerWrapper component used by the Datepicker, Timepicker and Datetimepicker component. The native input does not seem to work here...

However, I don't use an iPhone or have one to debug it further. Any help or knowledge is welcome!!

lgedgar commented 4 months ago

I saw this using Linux / Firefox with Oruga 0.8.11 but not 0.8.10, with following example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>hello world</title>
    <script type="importmap">
      {
          "imports": {
              "vue": "https://unpkg.com/vue@3.3.11/dist/vue.esm-browser.js",
              "@oruga-ui/oruga-next": "https://unpkg.com/@oruga-ui/oruga-next@0.8.11/dist/esm/index.mjs",
              "@oruga-ui/theme-bulma": "https://unpkg.com/@oruga-ui/theme-bulma@0.3.0/dist/bulma.mjs"
          }
      }
    </script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@oruga-ui/theme-bulma@0.3.0/dist/bulma.css"></link>
  </head>
  <body>
    <div id="app" style="padding: 2rem;">

      <o-field label="1st Date">
        <o-datepicker v-model="date1" />
      </o-field>

      <o-field label="2nd Date">
        <o-datepicker v-model="date2" />
      </o-field>

      <o-field label="date1">
        {{ date1 || 'null' }}
      </o-field>

      <o-field label="date2">
        {{ date2 || 'null' }}
      </o-field>

    </div>
    <script type="module">
      import {createApp} from 'vue'
      import {Oruga} from '@oruga-ui/oruga-next'
      import {bulmaConfig} from '@oruga-ui/theme-bulma'

      const app = createApp({
          data() {
              return {
                  date1: null,
                  date2: new Date(),
              }
          },
      })
      app.use(Oruga, {...bulmaConfig})
      app.mount('#app')
    </script>

  </body>
</html>

I haven't tested anything with mobile, just desktop. Also presence or absence of initial value does not make a difference; both datepickers in above example will never show the calendar widget when input is clicked.

mlmoravek commented 4 months ago

I have extracted the rendered HTML in a mobile environment. While in a mobile environment the native datepicker should be used and not like in a desktop environment the custom one opened by the dropdown component.

<div data-oruga="field" class="o-field o-field--mobile o-field--focused"><label class="o-field__label"
                for="2cnd1y93a1v">Select a date</label>
            <div class="o-field__body">
                <div class="o-field o-field--addons">
                    <div data-oruga="datepicker" class="o-dpck o-dpck--mobile">
                        <div data-oruga="input" class="o-input__wrapper">
                           <input min="2024-06-13" max="2024-06-27"
                                id="2cnd1y93a1v" data-oruga-input="date" type="date"
                                class="o-input o-input--iconspace-left" autocomplete="off"
                                placeholder="Click to select...">
                                  <span class="o-icon o-input__icon-left" data-oruga="icon">
                                    <svg class="svg-inline--fa fa-calendar" aria-hidden="true"
                                      focusable="false" data-prefix="fas" data-icon="calendar" role="img"
                                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                    <path class="" fill="currentColor"
                                        d="M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z">
                                    </path>
                                </svg>
                             </span>
                         </div>
                    </div>
                </div>
            </div>
        </div>

mlmoravek commented 4 months ago

@lgedgar @theonelucas Can anyone confirm that this is an issue based on the latest version? Or is it a problem since 0.8.0?

From my research, this problem appears since 0.8.0 and worked before that. Because with 0.8.0, the placeholder feature was also introduced to the native input, i think. And this seems to be the overall source of the problem.

digital-codes commented 4 months ago

I observed the missing widget on iPhone a while ago, not sure if before 0.8.0. Also with 0.8.11 (latest from today) I get the following error on Linux:

Uncaught (in promise) ReferenceError: can't access lexical declaration 'isMobileNative' before initialization Might or might not be related, will open separate issue for this one. Didn't occur on 0.8.10

Well, that's a different error. Btw. the datepicker widget appears on iPhone, provided the date field is not empty. The datetimepicker widget doesn't work at all, probably because of the reference error.

mlmoravek commented 4 months ago

Hey, please check if this PR deployment suits your needs and works as expected on your mobile devices and other mobile native environments:

https://deploy-preview-986--oruga-documentation-preview.netlify.app/

lgedgar commented 4 months ago

Can anyone confirm that this is an issue based on the latest version? Or is it a problem since 0.8.0?

From my research, this problem appears since 0.8.0 and worked before that. Because with 0.8.0, the placeholder feature was also introduced to the native input, i think. And this seems to be the overall source of the problem.

I've only used the datepicker on desktop, and not for very long. I believe the calendar popup on focus did NOT work in 0.8.8 but then it did work okay for 0.8.9 and 0.8.10 and then broke again with 0.8.11 - let me know if you need more info.

lgedgar commented 4 months ago

FYI - tested my above html page with Oruga 0.8.12 and it still didn't work right. But then I tried it with Vue 3.4.21 and Vue 3.4.31 and both worked correctly. So apparently the Vue 3.3.11 combined with Oruga 0.8.11+ will still not work (calendar widget is not shown), but latest Vue + Oruga is okay.

I had been testing with Vue 3.3 on account of https://github.com/oruga-ui/oruga/issues/709#issuecomment-1873717235 (since I did see that error at some point) but I'll do some more testing with 3.4 now instead. Will open separate issue if I find anything else.

mlmoravek commented 4 months ago

@lgedgar I appreciate your testing efforts! I cannot test everything every time. I mainly work with the latest version of Vue. So I recommend if you guys are active in the development stage, stay up to date with vue and oruga so the cap does not get too big.

Yes, please open issues if you have any problems or other issues and let me know if you have any change requests. Oruga is community driven! Personally I will just try to keep the source code up to date with the modern Vue standards :)

The native date input is quite complex because it is implemented quite differently on different devices...

Also note that the default of the mobileNative prop will change to false (currently true) in 0.9. This will cause the custom picker to be used on mobile devices instead of the current native picker if not explicitly called.

oruga-ui / oruga