When the float: true parameter is used and the grid.addWidget() function is called, the browser freezes.

[Tedxjbc]

I would like to use float: true, but as soon as I call the addWidget() function, the browser freezes. I read in the documentation that I need to have the minRow parameter specified, but it still doesn't work. I also tried adding one static widget to make the grid not empty, but that didn't help either. What am I doing wrong?

var options = {
      alwaysShowResizeHandle: true,
      minRow: 1,
      float: true,
      removable: '.trash'

};
this.grid = GridStack.init(options);

addNewWidget() {
      this.grid.addWidget({ w: 2, h: 3, content: 'New Item', id: this.count });
      this.count++;
}

I use the library in Vue3. When I use float:false (which is the default value), everything works.

[adumesny]

please post a reproduceable case, ideally plain not vue3 based, to show the issue. Nothing obviously wrong.

[Tedxjbc]

please post a reproduceable case, ideally plain not vue3 based, to show the issue. Nothing obviously wrong.

Hi, I don't know what you mean by plain text, so I'll at least share the rest of the code I have. The project I'm working on is large and consists of many other parts. This is just one of them. That's why I'm also sharing the Vue3 based code here even if you didn't want me to.

This is my HTML code

<div class="full-width row justify-center items-center">
  <q-btn @click="addNewWidget()">Add</q-btn>
  <!-- <q-btn @click="removeItem()">Remove</q-btn> -->
  <div class="trash">
  </div>
</div>

This is script

export default {
  name: 'GridStack',
  components: {
    Widget
  },
  data() {
    return {
      grid: null,
      // widgets: initialWidgets,
      widgets: null,
      count: 0
    };
  },
  methods: {
    addNewWidget() {
      this.grid.addWidget({ w: 2, h: 3, content: 'Item', id: this.count });
      this.count++;
    }
  },
  mounted() {
    var options = {
      alwaysShowResizeHandle: true,
      minRow: 1,
      float: false,
      removable: '.trash'

    };
    this.grid = GridStack.init(options);
  }
}

And this is my component

<template>
  <div class="grid-stack-item" v-bind="gridStackAttributes">
    <div class="grid-stack-item-content">{{widget.text}}
    </div>
  </div>
</template>

<script>


export default {
  props: {
    widget: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    gridStackAttributes() {
      return {
        id: get(this.widget, 'id', 'widget'),
        "data-gs-id": get(this.widget, "id", "widget"),
        "data-gs-x": get(this.widget, "layout.x", 0),
        "data-gs-y": get(this.widget, "layout.y", 0),
        "data-gs-width": get(this.widget, "layout.width", 2),
        "data-gs-height": get(this.widget, "layout.height", 1)
      }
    }
  }
  }
</script>
<style>
.grid-stack-item {
  margin: 10px;
}
.grid-stack-item-content {
  display: flex;
  justify-content: center;
  align-items: center;
  color: red;
  background-color: yellow;
  font-weight: 600;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
</style>

And that's it, there is nothing else on the page except the title and menu.

[adumesny]

the instruction has this. I can't debug your vue code above...

You MUST provide a working demo (keep it simple!) you can use https://jsfiddle.net/adumesny/jqhkry7g

[jojoxd]

I got this issue too, it's possible that vue3's reactivity system causes an infinite loop by making the GridStack instance reactive. (When I tried looking at the instance in console, it was a Proxy instead of a GridStack instance.)

I solved it by using markRaw(GridStack.init(opts)) where markRaw came from vue/vue-demi. I also use makeWidget() instead of addWidget()

[adumesny]

closing due to no reproduceable example.