Text type formulas use GridViewFieldLongText to show text

changelog.md

@@ -14,6 +14,8 @@
   select the type of row identifier displayed next to a row (`Count`or `Row Identifier`).
 * Added an admin setting to disable the ability to reset a users password.
 * Fix formula bug caused when arguments of `when_empty` have different types.
+* Formulas of type text now use textarea to show the cell value.
+* Fix a bug in public grid views that prevented expanding long-text cells.
 
 ## Released (2022-10-05 1.10.0)
 

web-frontend/modules/database/components/view/grid/fields/GridViewFieldFormula.vue

@@ -5,6 +5,7 @@
     :value="value"
     :read-only="true"
     :selected="selected"
+    :store-prefix="storePrefix"
     class="active"
   ></component>
 </template>
@@ -13,7 +14,7 @@
 import gridField from '@baserow/modules/database/mixins/gridField'
 
 export default {
-  name: 'GridViewFormulaField',
+  name: 'GridViewFieldFormula',
   mixins: [gridField],
   methods: {
     getComponent(field) {

web-frontend/modules/database/components/view/grid/fields/GridViewFieldLongText.vue

@@ -2,18 +2,19 @@
   <div
     ref="cell"
     class="grid-view__cell grid-field-long-text__cell active"
-    :class="{ editing: editing }"
+    :class="{ editing: opened }"
     @contextmenu="stopContextIfEditing($event)"
   >
-    <div v-show="!editing" class="grid-field-long-text">{{ value }}</div>
+    <div v-if="!opened" class="grid-field-long-text">{{ value }}</div>
     <textarea
-      v-if="editing"
+      v-else-if="editing"
       ref="input"
       v-model="copy"
       v-prevent-parent-scroll
       type="text"
       class="grid-field-long-text__textarea"
     />
+    <div v-else class="grid-field-long-text__textarea">{{ value }}</div>
   </div>
 </template>
 

web-frontend/modules/database/formula/formulaTypes.js

@@ -1,12 +1,15 @@
 import { Registerable } from '@baserow/modules/core/registry'
 import RowEditFieldText from '@baserow/modules/database/components/row/RowEditFieldText'
+import RowEditFieldLongText from '@baserow/modules/database/components/row/RowEditFieldLongText'
 import RowEditFieldNumber from '@baserow/modules/database/components/row/RowEditFieldNumber'
 import RowEditFieldDate from '@baserow/modules/database/components/row/RowEditFieldDate'
+import GridViewFieldLongText from '@baserow/modules/database/components/view/grid/fields/GridViewFieldLongText'
 import RowEditFieldBoolean from '@baserow/modules/database/components/row/RowEditFieldBoolean'
 import FunctionalGridViewFieldDate from '@baserow/modules/database/components/view/grid/fields/FunctionalGridViewFieldDate'
 import FunctionalGridViewFieldBoolean from '@baserow/modules/database/components/view/grid/fields/FunctionalGridViewFieldBoolean'
 import FunctionalGridViewFieldSingleSelect from '@baserow/modules/database/components/view/grid/fields/FunctionalGridViewFieldSingleSelect'
 import FunctionalGridViewFieldNumber from '@baserow/modules/database/components/view/grid/fields/FunctionalGridViewFieldNumber'
+import FunctionalGridViewFieldLongText from '@baserow/modules/database/components/view/grid/fields/FunctionalGridViewFieldLongText'
 import FunctionalGridViewFieldText from '@baserow/modules/database/components/view/grid/fields/FunctionalGridViewFieldText'
 import FunctionalGridViewFieldBlank from '@baserow/modules/database/components/view/grid/fields/FunctionalGridViewFieldBlank'
 import FunctionalGridViewFieldArray from '@baserow/modules/database/components/view/grid/fields/FunctionalGridViewFieldArray'
@@ -105,12 +108,16 @@ export class BaserowFormulaTextType extends BaserowFormulaTypeDefinition {
     return 'font'
   }
 
+  getGridViewFieldComponent() {
+    return GridViewFieldLongText
+  }
+
   getRowEditFieldComponent() {
-    return RowEditFieldText
+    return RowEditFieldLongText
   }
 
   getFunctionalGridViewFieldComponent() {
-    return FunctionalGridViewFieldText
+    return FunctionalGridViewFieldLongText
   }
 
   getSortOrder() {

web-frontend/modules/database/mixins/gridFieldInput.js

@@ -7,6 +7,10 @@ import { isPrintableUnicodeCharacterKeyPress } from '@baserow/modules/core/utils
 export default {
   data() {
     return {
+      /**
+       * Indicates whether the cell is opened.
+       */
+      opened: false,
       /**
        * Indicates whether the user is editing the value.
        */
@@ -88,6 +92,7 @@ export default {
      * need it. We will also save the changes if the user was editing.
      */
     beforeUnSelect() {
+      this.opened = false
       if (this.editing && this.isValid()) {
         this.save()
       } else {
@@ -108,6 +113,7 @@ export default {
      * Method that can be called to initiate the edit state.
      */
     edit(value = null, event = null) {
+      this.opened = true
       if (this.readOnly) {
         return
       }
@@ -122,6 +128,7 @@ export default {
      * eventually save the changes.
      */
     save() {
+      this.opened = false
       this.editing = false
       const newValue = this.beforeSave(this.copy)
 
@@ -138,6 +145,7 @@ export default {
      * without saving.
      */
     cancel() {
+      this.opened = false
       this.editing = false
       this.copy = this.value
       this.$emit('edit', this.value, this.value)