Angular firestore updating document makes element scroll to its top

user_11777715 0
Viewed 153

Clicking on checkbox makes parent element scroll to it's top. I found the afs update function is making this happen. How can I prevent scrolling of element that I assume, got reloaded due to afs update? Is there any way to remember the scroll position and set it back after update or so?

enter image description here

component.html

<div class="taskScrollableContent">
   <div class="taskDescription">
      <p>{{ task.description }}</p>
   </div>
   <div class="todoList">
      <ul *ngFor="let todo of task.todoList; let j = index">
         <li>
           <input type="checkbox" [checked]="todo.isDone" (change)="onTodoCheck(task.todoList, task.id, j)">
           <p [ngClass]="{'done': todo.isDone }">{{ todo.name }}</p>
        </li>
     </ul>
  </div>
</div>

style

.taskScrollableContent {
    max-height: 250px;
    overflow: auto;
}
.taskScrollableContent::-webkit-scrollbar{
    width: 3px;
}
.taskDescription{
    padding: 0 3px;
}
.taskDescription p{
    word-break: break-word;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1rem;
    color: #444;
}
.todoList{
    padding: 0 10px;
    margin-bottom: 10px;
    font-size: 0.8rem;
}
.todoList ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.todoList li{
    word-break: break-word;
}
.todoList input[type=checkbox]{
    margin-right: 3px;
    vertical-align: text-bottom;
    cursor: pointer;
}
.todoList p{
    padding: 0;
    display: inline;
}
.todoList .done{
    text-decoration: line-through;
}

component.ts

onTodoCheck(todos: Array<Todo>, taskId: string, i: number): void {
  todos[i].isDone = !todos[i].isDone;
  this.afs.collection('boards').doc(this.boardId)
  .collection('categoryList').doc(this.categoryId)
  .collection('taskList').doc(taskId).update({todoList: todos});
}
angular-directive google-cloud-firestore angular firebase
1 Answers

Sorry that you're only getting a response 2 years on!

I'm not sure about Angular, but for React you can 'trick' the component to prevent it rerendering by using an array.

For example,

// re-renders
const [data1, setData1] = useState(true);

// doesn't re-render IF you mutate the array directly
const [data2, setData2] = useState([true]);
user_177433140
Related