The QPopupEdit component can be used to edit a value “in place”, like for example a cell in QTable. By default, a cell is displayed as a String, then if you are using QPopupEdit and a user clicks/taps on the table cell, a popup will open where the user will be able to edit the value using a textfield.
This component injects a QMenu into its parent DOM element and enables the behavior described above, so it can be used anywhere, not only in QTable.
Usage
If used on a QTable, QPopupEdit won’t work with cell scoped slots.
Standalone
With QTable
Click on the cells to see the popup editor. The column “Name” demonstrates the title prop. The column “Calories” displays a numeric value usage. The column “Fat” also demonstrates the disable prop. If you look at the source code, you’ll see the cell for “fat” is using QPopupEdit, yet when clicking on the cell, the popup doesn’t show.
Customizing
Persistent and with buttons
You can also add two buttons with the buttons prop, “Cancel” and “Set” (the default labels). These buttons help to control the user’s input. Along with the buttons prop, you also have the persistent prop, which denies the user from closing the popup with the escape key or clicking/ tapping outside of the popup. Lastly, you can control the labels of the two buttons with the label-set and label-cancel props, as seen in the “Protein” column. Notice “Save” is replacing “Set” and “Close” is replacing “Cancel”.
The
persistentprop is demonstrated in the “carbs” column.
The default slot
The default slot’s parameters are:
{
initialValue, value, validate, set, cancel, updatePosition
}Do not destructure the slot’s parameters as it will generate linting errors when using the value prop directly with v-model.
Textarea / QEditor
Since QPopupEdit wraps QInput, you can basically use any type of QInput. For instance, you can also use a text area as shown below in the “Comments” column.
When using a multi-line control (textarea, QEditor) for input, you’ll need to also use @keyup.enter.stop on the component in order to stop the enter key from closing the popup. You’ll also need to add buttons for controlling the popup too.
Validation
QPopupEdit also allows for simple validation of the input. To use it, you give it a callback function in the form of an arrow function and it should return a Boolean. (value) => Boolean. This is demonstrated in the “Calories” column below.
Notice we are using the hide event to also revalidate the input. If we don’t, QInput’s error prop will ‘hang’ in an invalid state.
With this example, we are using QInput’s external error handling. We could also use QInput’s validation prop and emit the value to QPopupEdit’s validation prop. The same concept can be implemented, when using Regle external validation library too. In other words, the value given to QPopupEdit’s validate function can come from anywhere.
Accessibility v2.25+
QPopupEdit is built on QMenu, so the popup itself claims no ARIA role — see QMenu’s Accessibility section for the underlying keyboard and focus behavior. Escape cancels the edit and returns focus to the element the popup covers, and closing the popup any other way without going through validation never silently commits: depending on the auto-save prop, either a value that passes validation is saved or cancel is emitted. When using the buttons prop, “Set” and “Cancel” render as real buttons whose default labels come localized from the Quasar Language Pack (override them with label-set / label-cancel).
A few responsibilities remain yours: put autofocus on your input so keyboard focus lands in the editor as soon as the popup opens; wire Enter-to-save yourself with @keyup.enter="scope.set" (as the examples above do); and note that the title prop renders purely visual text — it is not wired up as the popup’s accessible name.