Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

When autocomplete is bound to an object, float label overlaps in some circumstances #450

Closed
blurbiness opened this issue Aug 21, 2020 · 1 comment
Closed

When autocomplete is bound to an object, float label overlaps in some circumstances #450

blurbiness opened this issue Aug 21, 2020 · 1 comment
Assignees
@cagataycivici
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone
2.0.8

Comments

@blurbiness
Copy link

When autocomplete is bound to an object instead to a plain value, in some circumstances its value is an object but its inputTextValue is still null or empty string and therefore float label overlaps:

The following HTML can be open in a browser to reproduce the behaviour.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Autocomplete float label issue</title>
    <link href="https://unpkg.com/primevue/resources/themes/mdc-dark-deeppurple/theme.css" rel="stylesheet">
    <link href="https://unpkg.com/primevue/resources/primevue.css " rel="stylesheet">
    <link href="https://unpkg.com/primeicons/primeicons.css " rel="stylesheet">
    <link href="https://unpkg.com/primeflex/primeflex.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
    <script src="https://unpkg.com/primevue/components/autocomplete/autocomplete.umd.js"></script>
    <style>
        html {
            font-size: 14px;
        }
        body {
            font-family: var(--font-family);
            background-color: var(--surface-a);
            color: var(--text-color);
        }
    </style>
</head>

<body>
<h1>PrimeVue autocomplete issue with float label</h1>
<div>
<p>When autocomplete is bound with v-model to an object instead of a plain value, float label overlaps in some circumstances.</p>
<p>Steps to reproduce behaviour</p>
<ol>
    <li>Do not type in the autocomplete which is bound to an object.</li>
    <li>Click on dropdown and select an item</li>
    <li>Change the focus to another control.</li>
    <li>Now, the autocomplete value will be an object, but its <code>inputTextValue</code> is still null or empty string, and therefore float label overlaps.</li>
</ol>
<p>This happens too if an initial object value is set into the autocomplete programmatically (because its internal input will still have a null or empty string).</p>
</div>

<div id="app">
    <div class="p-input-filled">
        <div class="p-formgroup-inline">
            <div class="p-field">
                <!-- Binding p-autocomplete to a plain value works ok -->
                <span class="p-float-label">
                    <p-autocomplete id="ac1" v-model="plainValue" :suggestions="filteredPlainValues" @complete="searchPlain($event)" :dropdown="true"></p-autocomplete>
                    <label for="ac1">Plain sample</label>
                </span>        
            </div>

            <div class="p-field">
                <!-- Binding to an Object makes float label to overlap -->
                <span class="p-float-label">
                    <p-autocomplete id="ac2" v-model="objValue" field="someLabel" :suggestions="filteredObjValues" @complete="searchObj($event)" :dropdown="true"></p-autocomplete>
                    <label for="ac2">Object sample</label>
                </span>        
            </div>
        </div>
    </div>
</div>

<script>
new Vue({
  components: {
    'p-autocomplete': autocomplete
  },
  data: function() {
      return {
          plainValue: null,
          filteredPlainValues: ['Sample A', 'Sample B', 'Sample C'],
          // Assigning an initial object value instead of null makes the float label to overlap initially.
          // objValue: {someValue:'V001', someLabel:'One'},
          objValue: null,
          filteredObjValues: [
              {someValue:'V001', someLabel:'One'},
              {someValue:'V002', someLabel:'Two'},
              {someValue:'V003', someLabel:'Three'}],
      }
  },
  methods: {
      // No relevant for this issue. Just reassign arrays to
      // indicate p-autocomplete that search has been completed.
      searchPlain(event) {this.filteredPlainValues = this.filteredPlainValues.slice()},
      searchObj(event) {this.filteredObjValues = this.filteredObjValues.slice()},
  },
}).$mount('#app')
</script>
</body>
@cagataycivici cagataycivici self-assigned this Aug 27, 2020
@cagataycivici cagataycivici added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Aug 27, 2020
@cagataycivici cagataycivici added this to the 2.0.8 milestone Aug 27, 2020
@JobberRT
Copy link

Sorry for dig this old issue, but have you found the solution? Can you share it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cagataycivici cagataycivici

Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Milestone
2.0.8
Development

No branches or pull requests
3 participants
@cagataycivici @JobberRT @blurbiness