Text input broken for horizontal fields

lgedgar commented 6 months ago

Overview of the problem

Oruga version: [0.8.8] Vuejs version: [3.3.11] OS/Browser: Debian, Firefox 115 (and Chromium 124)

Description

The <o-input type="text"> is behaving badly when wrapped in <o-field horizontal> - makes the input textbox practically unusable.

You can focus the textbox, but then after pressing one key the focus blurs so you have to click the input again to press another key.

This quirk is new as of 0.8.8, so for now I'm using 0.8.7 which does not have the issue.

Steps to reproduce

Make a text input wrapped in horizontal field:

<o-field label="Stuff" horizontal>
  <o-input v-model="stuff" />
</o-field>

I believe that would show the behavior in any context. But just in case, here is a complete 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.8/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;">
      <p class="block is-italic">
        NB. typing works normally unless field is horizontal
      </p>

      <o-field>
        <o-checkbox v-model="horizontal">
          horizontal
        </o-checkbox>
      </o-field>

      <o-field label="Stuff (type in here)"
               :horizontal="horizontal">
        <o-input v-model="stuff"
                 expanded />
      </o-field>

      <br />
      <o-button variant="primary">
        this button does nothing
      </o-button>
    </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 {
                  horizontal: false,
                  stuff: null,
              }
          },
      })
      app.use(Oruga, {...bulmaConfig})
      app.mount('#app')
    </script>

  </body>
</html>

Expected behavior

Typing should be allowed as normal, for text input in horizontal field.

Actual behavior

Typing is very problematic as described above.

If I pass :horizontal="false" (or just omit it) to the field, then the input textbox behaves normally. (But that would break my layout so I use 0.8.7 for now.)

Let me know if I can help further with this.

mlmoravek commented 6 months ago

@lgedgar could you check if the o-field is now working as you would expect on the deployed preview in #915 ?

andrzejkupczyk commented 6 months ago

I'm not sure if this is related, but I've observed another issue. I've attached screenshots below to illustrate the problem. Although it wasn't a major issue—since I was able to fix it by using the expanded property—it was unexpected.

v0.8.7

v0.8.8

The code consists of OField wrapping OInput component, nothing special. I hope this will be useful for someone.

mlmoravek commented 6 months ago

@andrzejkupczyk I don't know how that happened, but i think it's more like it's supposed to be now :)

lgedgar commented 6 months ago

Apologies for slow reply here, but confirmed that 0.8.9 fixes - thanks!

oruga-ui / oruga