Control doesn't set language

[jmartyniak]

The code input control doesn't set the selected language in the published json coming out of sanity. The v2 version does.

[damsalem]

This issue should be renamed. A more relevant title is:

Language Property Doesn't Set Default Language

Summary

The language property as indicated in the ReadMe does not set the default language in Sanity, it only appears to affect the UI of the Structure editor.

// This was taken directly from the ReadMe
{
  name: 'codeField',
  title: 'Code Field',
  type: 'code',
  options: {
    language: 'javascript', // <---- This property/option is broken
    languageAlternatives: [
      {title: 'JavaScript', value: 'javascript'},
      {title: 'HTML', value: 'html'},
      {title: 'CSS', value: 'css'},
    ],
  },
  hidden: ({parent}) => parent?.showHeaderCode === 'Hide',
}

The evidence of this is that if you add a validation rule ensuring the language isn't blank, you'll find the rule triggers an error.

// Sample code to recreate this issue:
{
  name: 'codeField',
  title: 'Code Field',
  type: 'code',
  options: {
    language: 'javascript',
    languageAlternatives: [
      {title: 'JavaScript', value: 'javascript'},
      {title: 'HTML', value: 'html'},
      {title: 'CSS', value: 'css'},
    ],
  },
  hidden: ({parent}) => parent?.showHeaderCode === 'Hide',
  validation: (Rule) => Rule.required().error('Please select a language'), // <-- this will always trigger the error
}

End User Workaround

1. From the language dropdown, select a language other than the default
2. From the language dropdown, reselect the default language

Dev Workaround

If you don't want your end users to have to select a different language and then select the one they actually wanted. You could just add a blank option and keep that at the top. Then your users will always have to select the correct language which will

1. Drop the broken language property
2. Add an empty string as the top language alternative. The top language alternative is the default option.
3. Add a validation rule requiring a language be selected

{
  name: 'codeField',
  title: 'Code Field',
  type: 'code',
  options: {
    languageAlternatives: [
      {title: '', value: ''},
      {title: 'JavaScript', value: 'javascript'},
      {title: 'HTML', value: 'html'},
      {title: 'CSS', value: 'css'},
    ],
  },
  hidden: ({parent}) => parent?.showHeaderCode === 'Hide',
  validation: (Rule) => Rule.required().error('Please select a language'),
},