Vocabulary `displayed-value`s aren't retrieved using the encoded `stored-value` in submission form

[alexandrevryghem]

Describe the bug When a field that uses a vocabulary already contains a value (on page refresh or using item template), the displayed-value is retrieved by sending the stored-value to the backend. The problem is that this value isn't encoded, which means that it sometimes can't retrieve the correct displayed-value. This happens for example if your stored-value ends with a trailing slash.

To Reproduce Steps to reproduce the behavior:

1. Add this value-pairs to your submission-forms.xml:

   <value-pairs value-pairs-name="custom_rights" dc-term="type">
       <pair>
           <displayed-value>N/A</displayed-value>
           <stored-value></stored-value>
       </pair>
       <pair>
           <displayed-value>CC-BY-SA</displayed-value>
           <stored-value>https://creativecommons.org/licenses/by-sa/4.0/</stored-value>
       </pair>
       <pair>
           <displayed-value>CC-BY-NC</displayed-value>
           <stored-value>https://creativecommons.org/licenses/by-nc/4.0</stored-value>
       </pair>
   </value-pairs>
   

2. Add this field to your submission form:

   <field>
       <dc-schema>dc</dc-schema>
       <dc-element>rights</dc-element>
       <repeatable>false</repeatable>
       <label>Rights</label>
       <input-type value-pairs-name="custom_rights">dropdown</input-type>
       <hint>Select the rights.</hint>
       <required></required>
   </field>
   

3. Select CC-BY-SA and click save
4. Refresh the page

Expected behavior After refreshing the page you should still see CC-BY-SA in the dc.rights field, but now https://creativecommons.org/licenses/by-sa/4.0/ is being displayed instead