<타이틀 수정 바깥을 클릭했을 때, 수정폼 닫히게 하기>까지의 과정

[yejineee]

문제 1 : 아래와 같은 코드는 target에 input이 있지 않은 문제가 있다.

    <template v-if="showEditForm">
      <form @click="clickBackground">
        <div id="background" @click="clickBackground"></div>
        <input
          id="column__title-edit-form"
          v-model="updatedTitle"
          :minlength="minTitle"
          :maxlength="maxTitle"
          @click="clickInput"
        />
      </form>
    </template>

이벤트가 캡쳐링 -> 타겟 -> 버블링이 되는 과정을 생각하면, click 이벤트 핸들러가 input의 부모에 위치해야 한다.

    <div v-if="showEditForm" id="background" @click="clickBackground">
      <form @submit.prevent="submitUpdatedTitle">
        <input
          id="column__title-edit-form"
          v-model="updatedTitle"
          :minlength="minTitle"
          :maxlength="maxTitle"
        />
      </form>
    </div>

input을 클릭했을 떄는 수정폼이 닫히면 안된다.
따라서 input을 클릭했을 경우에는 이벤트의 전파를 막아서, background에 걸어놓은 submitUpdatedTitle핸들러가 실행되지 않도록 하였다.

    <div v-if="showEditForm" id="background" @click="submitUpdatedTitle">
      <form @submit.prevent="submitUpdatedTitle">
        <input
          id="column__title-edit-form"
          v-model="updatedTitle"
          :minlength="minTitle"
          :maxlength="maxTitle"
          @click.stop
        />
      </form>
    </div>

문제2 : form의 위치가 타이틀이 위치했던 곳이 아닌 다른곳에 위치하게 되었다.

일반적으로 수정은 타이틀이 위치한 바로 그곳에서 form으로만 대체되어야 한다.
그러나, background의 css로 인하여 내부에 있는 form의 위치가 영향을 받아, form이 타이틀이 위치한 곳이 아닌 다른 곳에 위치하게 되었다.

css를 수정하던가, 다른 방법을 찾아보는 방법이 있었다.
css수정은 머리 아파서 패스했다.
다른 방법으로는 컴포넌트를 분리하는 것이었다.
컴포넌트로 분리하였을 때, 선언형프로그래밍을 할 수 있을 것 같아서 컴포넌트를 분리하기로 하였다.

    <ColumnEditForm
      v-if="showEditForm"
      :id="column.id"
      :title="column.title"
      @update-title="toggleEditTitleForm"
    >
    </ColumnEditForm>
    <div v-else class="column__title" @click="toggleEditTitleForm">
      {{ column.title }}
    </div>

기존처럼 전체 영역을 차지하는 background라는 엘리먼트에 이벤트를 걸지 않고, window에 이벤트를 걸어주었다.
ColumnEditForm 컴포넌트가 생성(created)되었을 때, window에 수정폼을 제출하는 클릭 이벤트를 걸어주었다.
해당 컴포넌트가 없어졌을 때는, 클릭 이벤트를 삭제하였다.

  created() {
    window.addEventListener('click', this.clickOuterHandler);
  },
  destroyed() {
    window.removeEventListener('click', this.clickOuterHandler);
  },
  methods: {
    clickOuterHandler({ target }) {
      if (target.className === 'column__title') {
        return;
      }
      this.submitUpdatedTitle();
    },