Focus relation role when clicking on member or membership item label (c…

…lose #7690)
openstreetmap · Jun 10, 2020 · 369044b · 369044b
1 parent 7c180cc
commit 369044b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/modules/ui/sections/raw_member_editor.js b/modules/ui/sections/raw_member_editor.js
@@ -16,7 +16,7 @@ import { svgIcon } from '../../svg/icon';
 import { services } from '../../services';
 import { uiCombobox } from '../combobox';
 import { uiSection } from '../section';
-import { utilDisplayName, utilDisplayType, utilHighlightEntities, utilNoAuto } from '../../util';
+import { utilDisplayName, utilDisplayType, utilHighlightEntities, utilNoAuto, utilUniqueDomId } from '../../util';
 
 
 export function uiSectionRawMemberEditor(context) {
@@ -121,7 +121,8 @@ export function uiSectionRawMemberEditor(context) {
                 type: member.type,
                 role: member.role,
                 relation: entity,
-                member: context.hasEntity(member.id)
+                member: context.hasEntity(member.id),
+                domId: utilUniqueDomId(entityID + '-member-' + index)
             });
         });
 
@@ -155,7 +156,8 @@ export function uiSectionRawMemberEditor(context) {
 
                 var label = item
                     .append('label')
-                    .attr('class', 'field-label');
+                    .attr('class', 'field-label')
+                    .attr('for', d.domId);
 
                 if (d.member) {
                     // highlight the member feature in the map while hovering on the list item
@@ -226,6 +228,9 @@ export function uiSectionRawMemberEditor(context) {
         wrapEnter
             .append('input')
             .attr('class', 'member-role')
+            .attr('id', function(d) {
+                return d.domId;
+            })
             .property('type', 'text')
             .attr('maxlength', context.maxCharsForRelationRole())
             .attr('placeholder', t('inspector.role'))

diff --git a/modules/ui/sections/raw_membership_editor.js b/modules/ui/sections/raw_membership_editor.js
@@ -18,7 +18,7 @@ import { svgIcon } from '../../svg/icon';
 import { uiCombobox } from '../combobox';
 import { uiSection } from '../section';
 import { uiTooltip } from '../tooltip';
-import { utilArrayGroupBy, utilDisplayName, utilNoAuto, utilHighlightEntities } from '../../util';
+import { utilArrayGroupBy, utilDisplayName, utilNoAuto, utilHighlightEntities, utilUniqueDomId } from '../../util';
 
 
 export function uiSectionRawMembershipEditor(context) {
@@ -190,7 +190,12 @@ export function uiSectionRawMembershipEditor(context) {
         parents.slice(0, _maxMemberships).forEach(function(relation) {
             relation.members.forEach(function(member, index) {
                 if (member.id === entity.id) {
-                    memberships.push({ relation: relation, member: member, index: index });
+                    memberships.push({
+                        relation: relation,
+                        member: member,
+                        index: index,
+                        domId: utilUniqueDomId(entityID + '-membership-' + relation.id + '-' + index)
+                    });
                 }
             });
         });
@@ -229,6 +234,9 @@ export function uiSectionRawMembershipEditor(context) {
         var labelEnter = itemsEnter
             .append('label')
             .attr('class', 'field-label')
+            .attr('for', function(d) {
+                return d.domId;
+            })
             .append('span')
             .attr('class', 'label-text')
             .append('a')
@@ -255,6 +263,9 @@ export function uiSectionRawMembershipEditor(context) {
         wrapEnter
             .append('input')
             .attr('class', 'member-role')
+            .attr('id', function(d) {
+                return d.domId;
+            })
             .property('type', 'text')
             .attr('maxlength', context.maxCharsForRelationRole())
             .attr('placeholder', t('inspector.role'))