Inside the CardModal.vue component, we will display the card title in a textarea element, which will be in edit mode once you click on the title. Figure 13.3 shows how the edit mode looks:

The textarea of the card title needs to auto-resize so that when a user types more characters it will grow, and when the user deletes characters it will decrease its height to make it always fit the card title, and once a user presses the Enter key, we will save the card title to the server.

To do the auto-resize, we will use autosize (https://github.com/jackmoore/autosize), which is small, standalone, and easy to use.  

The following shows how to auto-resize, as implemented in frontend/src/modals/CardModal.vue:

<template>
  <div class="modal" id="cardModal">
    <textarea id="cardTitle" class="auto-size" v-model="title" 
      @keydown.enter.prevent="changeCardTitle"></textarea>
  </div>
</template>

<script>
import autosize from 'autosize'
...
export default {
  name: 'CardModal',
  ...
  mounted () {
    setTimeout(() => {
      autosize($('.auto-size'))
    }, 0)

    $('#cardModal').on('show.bs.modal', () => {
      setTimeout(() => {
        autosize.update($('.auto-size'))
      }, 0)
      ...
    })
  },
  ...
}
</script>

As you can see, we add class auto-size to the textarea. In the mounted() method, we initialize the auto-resize ability of all the .auto-size elements by calling the autosize() method inside a setTimeout() callback. When the card modal window is opened, we call the autosize.update() method to resize the textarea to the required height.