From ea1913b52ed1c2ee00beee328d60c4e610da71e3 Mon Sep 17 00:00:00 2001 From: Jonas Raoni Soares da Silva Date: Mon, 6 Dec 2021 19:23:46 +0300 Subject: [PATCH 1/4] pkp/pkp-lib#6675 Added extra features to the Autosuggest field (showPagination, minInputLength, maxSelectedItems, replaceWhenFull) and a new component (FieldPagedAutosuggest) to enter a custom data mapper to feed the suggestions model. --- src/App.vue | 5 + src/components/Filter/FilterAutosuggest.vue | 2 + .../Form/fields/FieldBaseAutosuggest.vue | 141 +++++++++++++----- .../Form/fields/FieldControlledVocab.vue | 17 ++- .../Form/fields/FieldPagedAutosuggest.vue | 25 ++++ .../Form/fields/FieldSelectIssues.vue | 24 ++- .../Form/fields/FieldSelectSubmissions.vue | 40 +++-- .../Form/fields/FieldSelectUsers.vue | 24 ++- .../previews/PreviewFilterAutosuggest.vue | 5 +- .../previews/ExampleFieldUserAutosuggest.vue | 5 +- .../fields/FieldBaseAutosuggest/readme.md | 13 +- .../ComponentFieldPagedAutosuggest.vue | 24 +++ .../previews/PreviewFieldPagedAutosuggest.vue | 39 +++++ .../fields/FieldPagedAutosuggest/readme.md | 22 +++ src/docs/components/Form/readme.md | 2 +- .../previews/PreviewSubmissionsListPanel.vue | 2 +- src/mixins/fetch.js | 14 +- src/router.js | 6 + 18 files changed, 305 insertions(+), 105 deletions(-) create mode 100644 src/components/Form/fields/FieldPagedAutosuggest.vue create mode 100644 src/docs/components/Form/fields/FieldPagedAutosuggest/ComponentFieldPagedAutosuggest.vue create mode 100644 src/docs/components/Form/fields/FieldPagedAutosuggest/previews/PreviewFieldPagedAutosuggest.vue create mode 100644 src/docs/components/Form/fields/FieldPagedAutosuggest/readme.md diff --git a/src/App.vue b/src/App.vue index f844d782e..0f9144af7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -89,6 +89,11 @@ FieldBaseAutosuggest +
  • + + FieldPagedAutosuggest + +
  • FieldHtml diff --git a/src/components/Filter/FilterAutosuggest.vue b/src/components/Filter/FilterAutosuggest.vue index 2402ca050..4c7da0396 100644 --- a/src/components/Filter/FilterAutosuggest.vue +++ b/src/components/Filter/FilterAutosuggest.vue @@ -7,12 +7,14 @@ diff --git a/src/components/Form/fields/FieldSelectIssues.vue b/src/components/Form/fields/FieldSelectIssues.vue index 3ca3096b3..dc1987b6d 100644 --- a/src/components/Form/fields/FieldSelectIssues.vue +++ b/src/components/Form/fields/FieldSelectIssues.vue @@ -8,23 +8,21 @@ export default { /** * Set the suggestions from an API response * - * Maps the API response when searching for submissions + * Maps the API response when searching for issues * to an object with value and label props. * - * @param {Array} newItems List of submissions + * @param {Array} items List of issues + * @param {Number} itemsMax Total amount of issues based on the applied filters */ - setSuggestions(newItems) { - const suggestions = newItems - .filter(item => { - return !this.selected.find(s => s.value === item.id); - }) - .map(item => { - return { - value: item.id, - label: item.identification - }; - }); + setSuggestions(items, itemsMax) { + const suggestions = items.map(item => { + return { + value: item.id, + label: item.identification + }; + }); this.suggestions = suggestions; + this.itemsMax = itemsMax; } } }; diff --git a/src/components/Form/fields/FieldSelectSubmissions.vue b/src/components/Form/fields/FieldSelectSubmissions.vue index 9769541c7..60d8e69ba 100644 --- a/src/components/Form/fields/FieldSelectSubmissions.vue +++ b/src/components/Form/fields/FieldSelectSubmissions.vue @@ -11,30 +11,28 @@ export default { * Maps the API response when searching for submissions * to an object with value and label props. * - * @param {Array} newItems List of submissions + * @param {Array} items List of submissions + * @param {Number} itemsMax Total amount of submissions based on the applied filters */ - setSuggestions(newItems) { - const suggestions = newItems - .filter(item => { - return !this.selected.find(s => s.id === item.id); - }) - .map(item => { - const currentPublication = item.publications.find(publication => { - return publication.id === item.currentPublicationId; - }); - if (!currentPublication) { - return { - value: 0, - label: '' - }; - } else { - return { - value: item.id, - label: this.localize(currentPublication.fullTitle) - }; - } + setSuggestions(items, itemsMax) { + const suggestions = items.map(item => { + const currentPublication = item.publications.find(publication => { + return publication.id === item.currentPublicationId; }); + if (!currentPublication) { + return { + value: 0, + label: '' + }; + } else { + return { + value: item.id, + label: this.localize(currentPublication.fullTitle) + }; + } + }); this.suggestions = suggestions; + this.itemsMax = itemsMax; } } }; diff --git a/src/components/Form/fields/FieldSelectUsers.vue b/src/components/Form/fields/FieldSelectUsers.vue index c6b7c8fbf..b12e5b617 100644 --- a/src/components/Form/fields/FieldSelectUsers.vue +++ b/src/components/Form/fields/FieldSelectUsers.vue @@ -8,23 +8,21 @@ export default { /** * Set the suggestions from an API response * - * Maps the API response when searching for submissions + * Maps the API response when searching for users * to an object with value and label props. * - * @param {Array} newItems List of submissions + * @param {Array} items List of users + * @param {Number} itemsMax Total amount of users based on the applied filters */ - setSuggestions(newItems) { - const suggestions = newItems - .filter(item => { - return !this.selected.find(s => s.id === item.id); - }) - .map(item => { - return { - value: item.id, - label: item.fullName - }; - }); + setSuggestions(items, itemsMax) { + const suggestions = items.map(item => { + return { + value: item.id, + label: item.fullName + }; + }); this.suggestions = suggestions; + this.itemsMax = itemsMax; } } }; diff --git a/src/docs/components/Filter/previews/PreviewFilterAutosuggest.vue b/src/docs/components/Filter/previews/PreviewFilterAutosuggest.vue index 605e093a3..060ad1e2b 100644 --- a/src/docs/components/Filter/previews/PreviewFilterAutosuggest.vue +++ b/src/docs/components/Filter/previews/PreviewFilterAutosuggest.vue @@ -36,9 +36,10 @@ export default { ...fieldBase, ...fieldBaseAutosuggest, name: 'assignedTo', - label: 'Assigned to Editors', + label: 'Assigned to Editors (limited to 3 items)', selectedLabel: 'Assigned', - apiUrl: '/usernames.json' + apiUrl: '/usernames.json', + maxSelectedItems: 3 }, issues: { ...fieldBase, diff --git a/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/ExampleFieldUserAutosuggest.vue b/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/ExampleFieldUserAutosuggest.vue index b7b25da9a..85537113a 100644 --- a/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/ExampleFieldUserAutosuggest.vue +++ b/src/docs/components/Form/fields/FieldBaseAutosuggest/previews/ExampleFieldUserAutosuggest.vue @@ -4,7 +4,7 @@ import FieldBaseAutosuggest from '@/components/Form/fields/FieldBaseAutosuggest. export default { extends: FieldBaseAutosuggest, methods: { - setSuggestions(items) { + setSuggestions(items, itemsMax) { // Escape the search phrase for regex // See: https://stackoverflow.com/a/3561711/1723499 const regex = new RegExp( @@ -14,14 +14,13 @@ export default { const suggestions = items .filter(u => u.fullName.match(regex)) - .filter(u => !this.currentValue.includes(u.id)) .map(u => { return { value: u.id, label: u.fullName }; }); - + this.itemsMax = itemsMax; this.suggestions = [...suggestions]; } } diff --git a/src/docs/components/Form/fields/FieldBaseAutosuggest/readme.md b/src/docs/components/Form/fields/FieldBaseAutosuggest/readme.md index 20c607c69..6207f5ed5 100644 --- a/src/docs/components/Form/fields/FieldBaseAutosuggest/readme.md +++ b/src/docs/components/Form/fields/FieldBaseAutosuggest/readme.md @@ -2,6 +2,7 @@ | Key | Description | | --- | --- | +| `...` | Supports all props in [Fetch](#/pages/fetch). | | `...` | Supports all props in [FieldBase](#/component/Form/fields/FieldBase). | | `apiUrl` | A URL where suggestions can be retrieved. Suggestions are expected to be returned in a flat array. | | `deselectLabel` | A text label for the button to remove a selection. This must be included to be compatible with assistive technology. | @@ -9,6 +10,10 @@ | `initialPosition` | Whether selected entries should appear `inline` or `below` the input field when this field is created. Default is `inline`. The position will change automatically when the width of selected values is too large for the input field. | | `selected` | The currently selected options for this field. These should be objects with `value` and `label` keys. | | `selectedLabel` | A text label that proceeds the selected values. This must be included to be compatible with assistive technology. | +| `showPagination` | Whether to show a pagination below the items when `itemsMax` is bigger than `count`. Default: `true`. | +| `minInputLength` | Defines the minimum amount of characters to trigger the API request. Default: 0 | +| `maxSelectedItems` | Defines the maximum amount of items that can be selected. Default: null | +| `replaceWhenFull` | Defines the behavior of selecting an additional item when the `maxSelectedItems` has been reached. `true`: The new item replaces the last item. `false`: Blocks adding the new item. Default: `true` | ## Events @@ -26,13 +31,14 @@ import FieldBaseAutosuggest from './FieldBaseAutosuggest.vue'; export default { extends: FieldBaseAutosuggest, methods: { - setSuggestions(newItems) { - this.suggestions = newItems.map(item => { + setSuggestions(items, itemsMax) { + this.suggestions = items.map(item => { return { value: item.id, label: item.title }; - }) + }); + this.itemsMax = itemsMax; } } } @@ -45,5 +51,6 @@ The `value` is submitted with the form. The following autosuggest fields are available to be used. - `FieldAutosuggestPreset` can be used to when the options can be preset instead of requiring a request to the REST API. +- `FieldPagedAutosuggest` can be used to when the options might return a large list. - `FieldControlledVocab` can be used to enter metadata such as keywords and subjects. - `FieldSelectSubmissions` can be used to find and select submissions. \ No newline at end of file diff --git a/src/docs/components/Form/fields/FieldPagedAutosuggest/ComponentFieldPagedAutosuggest.vue b/src/docs/components/Form/fields/FieldPagedAutosuggest/ComponentFieldPagedAutosuggest.vue new file mode 100644 index 000000000..f025a7f1e --- /dev/null +++ b/src/docs/components/Form/fields/FieldPagedAutosuggest/ComponentFieldPagedAutosuggest.vue @@ -0,0 +1,24 @@ + diff --git a/src/docs/components/Form/fields/FieldPagedAutosuggest/previews/PreviewFieldPagedAutosuggest.vue b/src/docs/components/Form/fields/FieldPagedAutosuggest/previews/PreviewFieldPagedAutosuggest.vue new file mode 100644 index 000000000..0b9837c6b --- /dev/null +++ b/src/docs/components/Form/fields/FieldPagedAutosuggest/previews/PreviewFieldPagedAutosuggest.vue @@ -0,0 +1,39 @@ + + + diff --git a/src/docs/components/Form/fields/FieldPagedAutosuggest/readme.md b/src/docs/components/Form/fields/FieldPagedAutosuggest/readme.md new file mode 100644 index 000000000..32e8720ff --- /dev/null +++ b/src/docs/components/Form/fields/FieldPagedAutosuggest/readme.md @@ -0,0 +1,22 @@ +## Props + +| Key | Description | +| --- | --- | +| `...` | Supports all props in [Fetch](#/pages/fetch). | +| `...` | Supports all props in [FieldBase](#/component/Form/fields/FieldBase). | +| `...` | Supports all props in [FieldBaseAutosuggest](#/component/Form/fields/FieldBaseAutosuggest). | +| `dataMapper` | An optional function which will receive each item from the API response and should map them to a `new Option(label, value)` or an object `{label: "label", value: "value"}` | + +## Events + +See [FieldBase](#/component/Form/fields/FieldBase). + +## Usage + +This is an implementation of [FieldBaseAutosuggest](#/component/Form/fields/FieldBaseAutosuggest) that might display a pagination if there are too many results and also has a function to map the response. + +```html + +``` diff --git a/src/docs/components/Form/readme.md b/src/docs/components/Form/readme.md index accf407b5..5726ea790 100644 --- a/src/docs/components/Form/readme.md +++ b/src/docs/components/Form/readme.md @@ -4,7 +4,7 @@ | --- | --- | | `action` | Where the form should be submitted. It should be a full URL (`http://...`) to the API endpoint where this form is handled. | | `canSubmit` | A boolean indicating whether this form can be submitted. The save button will be disable if this is false. Default: `true`. | -| `errors` | Key/value object of messages. The key is the field `name` and the value is an array of errors. Errors are generated during form submission and handled automatically, so this prop can be omitted in most cicumstances. | +| `errors` | Key/value object of messages. The key is the field `name` and the value is an array of errors. Errors are generated during form submission and handled automatically, so this prop can be omitted in most circumstances. | | `fields` | Array of form fields. This prop is typically configured on the server, using the `Form` and `Field` classes in the PHP application. | | `groups` | Array of form groups. See "Groups and Group Descriptions" below. | | `id` | Used by a parent component, such as `Container`, to identify events emitted from the form and update the form props when necessary. | diff --git a/src/docs/components/ListPanel/previews/PreviewSubmissionsListPanel.vue b/src/docs/components/ListPanel/previews/PreviewSubmissionsListPanel.vue index 2c8ca547b..fd9cdbed0 100644 --- a/src/docs/components/ListPanel/previews/PreviewSubmissionsListPanel.vue +++ b/src/docs/components/ListPanel/previews/PreviewSubmissionsListPanel.vue @@ -104,7 +104,7 @@ export default { ...fieldBaseAutosuggest, apiUrl: '/usernames.json', name: 'assignedTo', - label: 'Assigned To Editors', + label: 'Assigned To Editors (limited to 3 items)', selectedLabel: 'Assigned' }, filterType: 'pkp-filter-autosuggest' diff --git a/src/mixins/fetch.js b/src/mixins/fetch.js index 9cfbe9d43..5bd47fbff 100644 --- a/src/mixins/fetch.js +++ b/src/mixins/fetch.js @@ -44,7 +44,9 @@ export default { isLoading: false, latestGetRequest: '', offset: 0, - searchPhrase: '' + itemsMax: 0, + searchPhrase: '', + lastRequest: null }; }, computed: { @@ -54,7 +56,7 @@ export default { * @return {Number} */ currentPage() { - return Math.floor(this.offset / this.count) + 1; + return Math.floor(this.offset / Math.max(1, this.count)) + 1; }, /** @@ -63,7 +65,7 @@ export default { * @return {Number} */ lastPage() { - return Math.ceil(this.itemsMax / this.count); + return Math.ceil(this.itemsMax / Math.max(1, this.count)); } }, methods: { @@ -90,7 +92,11 @@ export default { // discard responses that are outdated. this.latestGetRequest = $.pkp.classes.Helper.uuid(); - $.ajax({ + if (this.lastRequest) { + this.lastRequest.abort('Aborted due to new user request'); + } + + this.lastRequest = $.ajax({ url: this.apiUrl, type: 'GET', data: { diff --git a/src/router.js b/src/router.js index 50f775c75..449577bc1 100644 --- a/src/router.js +++ b/src/router.js @@ -11,6 +11,7 @@ import ComponentDropdown from './docs/components/Dropdown/ComponentDropdown.vue' import ComponentEmailTemplatesListPanel from './docs/components/ListPanel/ComponentEmailTemplatesListPanel.vue'; import ComponentFilter from './docs/components/Filter/ComponentFilter.vue'; import ComponentFieldAutosuggestPreset from './docs/components/Form/fields/FieldAutosuggestPreset/ComponentFieldAutosuggestPreset.vue'; +import ComponentFieldPagedAutosuggest from './docs/components/Form/fields/FieldPagedAutosuggest/ComponentFieldPagedAutosuggest.vue'; import ComponentFieldArchivingPn from './docs/components/Form/fields/FieldArchivingPn/ComponentFieldArchivingPn.vue'; import ComponentFieldBaseAutosuggest from './docs/components/Form/fields/FieldBaseAutosuggest/ComponentFieldBaseAutosuggest.vue'; import ComponentFieldBase from './docs/components/Form/fields/FieldBase/ComponentFieldBase.vue'; @@ -111,6 +112,11 @@ export default new Router({ name: 'Form/fields/FieldAutosuggestPreset', component: ComponentFieldAutosuggestPreset }, + { + path: '/component/Form/fields/FieldPagedAutosuggest/:example?', + name: 'Form/fields/FieldPagedAutosuggest', + component: ComponentFieldPagedAutosuggest + }, { path: '/component/Form/fields/FieldBaseAutosuggest/:example?', name: 'Form/fields/FieldBaseAutosuggest', From 7930922a7e0b7aa2e8b4a8c1de25791209cdd923 Mon Sep 17 00:00:00 2001 From: Jonas Raoni Soares da Silva Date: Mon, 13 Dec 2021 10:37:57 +0300 Subject: [PATCH 2/4] pkp/pkp-lib#6675 Replaced the pagination by a load more --- public/globals.js | 2 + src/App.vue | 4 +- src/components/Filter/FilterAutosuggest.vue | 4 +- .../Form/fields/FieldBaseAutosuggest.vue | 49 ++++++++++--------- .../Form/fields/FieldControlledVocab.vue | 19 ++++--- ...suggest.vue => FieldMappedAutosuggest.vue} | 9 +++- .../Form/fields/FieldSelectIssues.vue | 6 ++- .../Form/fields/FieldSelectSubmissions.vue | 12 +++-- .../Form/fields/FieldSelectUsers.vue | 6 ++- .../fields/FieldBaseAutosuggest/readme.md | 4 +- .../ComponentFieldMappedAutosuggest.vue | 24 +++++++++ .../PreviewFieldMappedAutosuggest.vue} | 6 +-- .../readme.md | 2 +- .../ComponentFieldPagedAutosuggest.vue | 24 --------- src/mixins/fetch.js | 5 +- src/router.js | 8 +-- 16 files changed, 105 insertions(+), 79 deletions(-) rename src/components/Form/fields/{FieldPagedAutosuggest.vue => FieldMappedAutosuggest.vue} (64%) create mode 100644 src/docs/components/Form/fields/FieldMappedAutosuggest/ComponentFieldMappedAutosuggest.vue rename src/docs/components/Form/fields/{FieldPagedAutosuggest/previews/PreviewFieldPagedAutosuggest.vue => FieldMappedAutosuggest/previews/PreviewFieldMappedAutosuggest.vue} (83%) rename src/docs/components/Form/fields/{FieldPagedAutosuggest => FieldMappedAutosuggest}/readme.md (96%) delete mode 100644 src/docs/components/Form/fields/FieldPagedAutosuggest/ComponentFieldPagedAutosuggest.vue diff --git a/public/globals.js b/public/globals.js index 5b58baa4d..e96fbe534 100644 --- a/public/globals.js +++ b/public/globals.js @@ -89,6 +89,8 @@ window.pkp = { 'common.pagination.label': 'View additional pages', 'common.pagination.next': 'Next page', 'common.pagination.previous': 'Previous page', + 'common.pagination.loadMore': 'Load more', + 'common.pagination.loadMore.description': '{$quantity} results not shown', 'common.remove': 'Remove', 'common.required': 'Required', 'common.save': 'Save', diff --git a/src/App.vue b/src/App.vue index 0f9144af7..2b581540d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -90,8 +90,8 @@
  • - - FieldPagedAutosuggest + + FieldMappedAutosuggest
  • diff --git a/src/components/Filter/FilterAutosuggest.vue b/src/components/Filter/FilterAutosuggest.vue index 4c7da0396..1aa6bb83c 100644 --- a/src/components/Filter/FilterAutosuggest.vue +++ b/src/components/Filter/FilterAutosuggest.vue @@ -7,14 +7,14 @@ diff --git a/src/docs/components/Form/fields/FieldPagedAutosuggest/previews/PreviewFieldPagedAutosuggest.vue b/src/docs/components/Form/fields/FieldMappedAutosuggest/previews/PreviewFieldMappedAutosuggest.vue similarity index 83% rename from src/docs/components/Form/fields/FieldPagedAutosuggest/previews/PreviewFieldPagedAutosuggest.vue rename to src/docs/components/Form/fields/FieldMappedAutosuggest/previews/PreviewFieldMappedAutosuggest.vue index 0b9837c6b..4f4c46a57 100644 --- a/src/docs/components/Form/fields/FieldPagedAutosuggest/previews/PreviewFieldPagedAutosuggest.vue +++ b/src/docs/components/Form/fields/FieldMappedAutosuggest/previews/PreviewFieldMappedAutosuggest.vue @@ -2,7 +2,7 @@
    This example is using minInputLength = 2 and a function to map the API response. - diff --git a/src/mixins/fetch.js b/src/mixins/fetch.js index 5bd47fbff..fe9ec4b4c 100644 --- a/src/mixins/fetch.js +++ b/src/mixins/fetch.js @@ -205,10 +205,7 @@ export default { if (document.readyState === 'complete') { this.get(); } else { - var self = this; - $(function() { - self.get(); - }); + $(() => this.get()); } } } diff --git a/src/router.js b/src/router.js index 449577bc1..0d7335f2b 100644 --- a/src/router.js +++ b/src/router.js @@ -11,7 +11,7 @@ import ComponentDropdown from './docs/components/Dropdown/ComponentDropdown.vue' import ComponentEmailTemplatesListPanel from './docs/components/ListPanel/ComponentEmailTemplatesListPanel.vue'; import ComponentFilter from './docs/components/Filter/ComponentFilter.vue'; import ComponentFieldAutosuggestPreset from './docs/components/Form/fields/FieldAutosuggestPreset/ComponentFieldAutosuggestPreset.vue'; -import ComponentFieldPagedAutosuggest from './docs/components/Form/fields/FieldPagedAutosuggest/ComponentFieldPagedAutosuggest.vue'; +import ComponentFieldMappedAutosuggest from './docs/components/Form/fields/FieldMappedAutosuggest/ComponentFieldMappedAutosuggest.vue'; import ComponentFieldArchivingPn from './docs/components/Form/fields/FieldArchivingPn/ComponentFieldArchivingPn.vue'; import ComponentFieldBaseAutosuggest from './docs/components/Form/fields/FieldBaseAutosuggest/ComponentFieldBaseAutosuggest.vue'; import ComponentFieldBase from './docs/components/Form/fields/FieldBase/ComponentFieldBase.vue'; @@ -113,9 +113,9 @@ export default new Router({ component: ComponentFieldAutosuggestPreset }, { - path: '/component/Form/fields/FieldPagedAutosuggest/:example?', - name: 'Form/fields/FieldPagedAutosuggest', - component: ComponentFieldPagedAutosuggest + path: '/component/Form/fields/FieldMappedAutosuggest/:example?', + name: 'Form/fields/FieldMappedAutosuggest', + component: ComponentFieldMappedAutosuggest }, { path: '/component/Form/fields/FieldBaseAutosuggest/:example?', From a7c2e48e172dbda07d6b5d8eeaee2f73ba2e57af Mon Sep 17 00:00:00 2001 From: Nate Wright Date: Tue, 14 Dec 2021 16:10:07 +0000 Subject: [PATCH 3/4] pkp/pkp-lib#6675 Minor adjustments to autosuggest styles when loading more --- .../Form/fields/FieldBaseAutosuggest.vue | 32 ++++++++++++------- 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue index fd1f2e015..279b1af06 100644 --- a/src/components/Form/fields/FieldBaseAutosuggest.vue +++ b/src/components/Form/fields/FieldBaseAutosuggest.vue @@ -70,7 +70,7 @@ > @@ -537,15 +539,18 @@ export default { } .pkpFormField--autosuggest__autosuggest { - --maxAutosuggestHeight: 100%; position: relative; } -.pkpFormField--autosuggest__pagination { - border-top: @bg-border; +.pkpFormField--autosuggest__loadMore { + border-top: 1px solid @primary; padding: 0.5rem 1rem; } +.pkpFormField--autosuggest__loadMoreCount { + margin-left: 0.25rem; +} + .pkpFormField--autosuggest__spinner { position: absolute; right: 1rem; @@ -574,8 +579,6 @@ export default { background: @lift; box-shadow: 0 0.75rem 0.75rem rgba(0, 0, 0, 0.2); font-size: @font-sml; - max-height: var(--maxAutosuggestHeight); - overflow: auto; &:after { content: ''; @@ -588,17 +591,22 @@ export default { background: @primary; } - ul { + ul[role='listbox'] { margin: 0; padding: 0; list-style: none; + max-height: 20rem; + overflow-y: scroll; } .autosuggest__results-item { position: relative; padding: 0.5rem 1rem; line-height: 1.5em; + } + .autosuggest__results-item:before, + .autosuggest__loadMore:before { &:before { content: ''; position: absolute; From 2527793b5391fd294456b7b786db98ff5d475b83 Mon Sep 17 00:00:00 2001 From: Jonas Raoni Soares da Silva Date: Mon, 20 Dec 2021 11:47:28 +0300 Subject: [PATCH 4/4] pkp/pkp-lib#6675 Updated load more button to be accessible through the keyboard navigation and fixed the auto-scrolling. --- package.json | 1 + .../Form/fields/FieldBaseAutosuggest.vue | 60 ++++++++++++++----- 2 files changed, 45 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 61c38ec68..52c1c1121 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { + "start": "npm run serve", "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue index 279b1af06..2cc08f356 100644 --- a/src/components/Form/fields/FieldBaseAutosuggest.vue +++ b/src/components/Form/fields/FieldBaseAutosuggest.vue @@ -68,28 +68,26 @@ @selected="selectSuggestion" :style="maxHeight === null || `--maxAutosuggestHeight: ${maxHeight}`" > -