QInlineEdit: focus input by .q-input-target, prevent ENTER propagation on textarea (quasarframework#2456)

* QInlineEdit: focus input by .q-input-target, prevent ENTER propagation on textarea

* Rename QInlineEdit to QPopupEdit

Author: pdanpdan

dev/components/components/data-table.vue

@@ -15,7 +15,7 @@
         <q-radio v-model="separator" val="none" label="None" />
       </div>
 
-      <h2>Inline editing</h2>
+      <h2>Popup editing</h2>
       <p class="caption">Click on Dessert or Calories cells.</p>
       <q-table
         :data="data"
@@ -27,22 +27,36 @@
         <q-tr slot="body" slot-scope="props" :props="props">
           <q-td key="desc" :props="props">
             {{ props.row.name }}
-            <q-inline-edit v-model="props.row.name">
+            <q-popup-edit v-model="props.row.name">
               <q-field count>
                 <q-input v-model="props.row.name" />
               </q-field>
-            </q-inline-edit>
+            </q-popup-edit>
           </q-td>
           <q-td key="calories" :props="props">
             {{ props.row.calories }}
-            <q-inline-edit v-model="props.row.calories" title="Update calories" buttons>
+            <q-popup-edit v-model="props.row.calories" title="Update calories" buttons>
               <q-field count>
                 <q-input type="number" v-model="props.row.calories" />
               </q-field>
-            </q-inline-edit>
+            </q-popup-edit>
+          </q-td>
+          <q-td key="fat" :props="props">
+            <div class="text-pre-wrap">{{ props.row.fat }}</div>
+            <q-popup-edit v-model="props.row.fat">
+              <q-field count>
+                <q-input type="textarea" v-model="props.row.fat" />
+              </q-field>
+            </q-popup-edit>
+          </q-td>
+          <q-td key="carbs" :props="props">
+            {{ props.row.carbs }}
+            <q-popup-edit v-model="props.row.carbs" title="Update carbs" buttons persistent>
+              <q-field count helper="Use buttons to close">
+                <q-input type="number" v-model="props.row.carbs" />
+              </q-field>
+            </q-popup-edit>
           </q-td>
-          <q-td key="fat" :props="props">{{ props.row.fat }}</q-td>
-          <q-td key="carbs" :props="props">{{ props.row.carbs }}</q-td>
           <q-td key="protein" :props="props">{{ props.row.protein }}</q-td>
           <q-td key="sodium" :props="props">{{ props.row.sodium }}</q-td>
           <q-td key="calcium" :props="props">{{ props.row.calcium }}</q-td>
@@ -682,4 +696,6 @@ export default {
 <style lang="stylus">
 .q-table + .q-table
   margin-top 25px
+.text-pre-wrap
+  white-space pre-wrap
 </style>

src/components.js

@@ -20,7 +20,6 @@ export * from './components/fab/index.js'
 export * from './components/field/index.js'
 export * from './components/icon/index.js'
 export * from './components/infinite-scroll/index.js'
-export * from './components/inline-edit/index.js'
 export * from './components/inner-loading/index.js'
 export * from './components/input/index.js'
 export * from './components/input-frame/index.js'
@@ -35,6 +34,7 @@ export * from './components/option-group/index.js'
 export * from './components/pagination/index.js'
 export * from './components/parallax/index.js'
 export * from './components/popover/index.js'
+export * from './components/popup-edit/index.js'
 export * from './components/progress/index.js'
 export * from './components/pull-to-refresh/index.js'
 export * from './components/radio/index.js'

src/components/inline-edit/index.js

@@ -4,7 +4,7 @@ import clone from '../../utils/clone.js'
 import { getEventKey } from '../../utils/event.js'
 
 export default {
-  name: 'QInlineEdit',
+  name: 'QPopupEdit',
   props: {
     value: {},
     persistent: Boolean,
@@ -96,7 +96,7 @@ export default {
       },
       on: {
         show: () => {
-          const input = this.$el.querySelector('input')
+          const input = this.$el.querySelector('.q-input-target, input')
           input && input.focus()
           this.$emit('show')
           this.initialValue = clone(this.value)

src/components/inline-edit/QInlineEdit.js src/components/popup-edit/QPopupEdit.jssrc/components/inline-edit/QInlineEdit.js renamed to src/components/popup-edit/QPopupEdit.js

@@ -0,0 +1,5 @@
+import QPopupEdit from './QPopupEdit.js'
+
+export {
+  QPopupEdit
+}

src/components/popup-edit/index.js

@@ -68,8 +68,13 @@ export default {
       })
     },
     __onKeydown (e) {
-      if (this.type !== 'textarea' && e.keyCode === 13) {
-        this.__emit()
+      if (e.keyCode === 13) {
+        if (this.type === 'textarea') {
+          e.stopPropagation()
+        }
+        else {
+          this.__emit()
+        }
       }
       this.$emit('keydown', e)
     },