oruga
oruga copied to clipboard
oruga-ui
Text input broken for horizontal fields
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/[email protected]/dist/vue.esm-browser.js",
"@oruga-ui/oruga-next": "https://unpkg.com/@oruga-ui/[email protected]/dist/esm/index.mjs",
"@oruga-ui/theme-bulma": "https://unpkg.com/@oruga-ui/[email protected]/dist/bulma.mjs"
}
}
</script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@oruga-ui/[email protected]/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.
@lgedgar could you check if the o-field is now working as you would expect on the deployed preview in #915 ?
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.
@andrzejkupczyk I don't know how that happened, but i think it's more like it's supposed to be now :)