# Unselect dropdown

**URL:** <https://jsonforms.discourse.group/t/unselect-dropdown/2340>\
**Category:** General\
**Created:** [September 16, 2024, 5:10pm UTC](https://jsonforms.discourse.group/t/unselect-dropdown/2340 "2024-09-16T17:10:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![VladislavLinnik](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/vladislavlinnik/32/1009_2.png) [@VladislavLinnik](https://jsonforms.discourse.group/u/VladislavLinnik)\
**Post date:** [September 16, 2024, 5:10pm UTC](https://jsonforms.discourse.group/t/unselect-dropdown/2340/1 "2024-09-16T17:10:30Z")

</div>

Hey, I want to make my custom dropdown unselectable.  
Could you please advise me on how to do it?  
If possible, thanks in advance 🙂

I’m using the following versions:  
“@jsonforms/angular”: “3.0.0”,  
“@jsonforms/angular-material”: “3.0.0”,  
“@jsonforms/core”: “3.0.0”

My custom dropdown:

 {{ label }} {{ option | jsonFormsDropdownLabel }} 

{{ error | jsonFormsUniqueError }}

import { Component } from '@angular/core'; import { AutocompleteControlRenderer } from '@jsonforms/angular-material';

@Component({  
selector: ‘app-jsonforms-unselect’,  
templateUrl: ‘./jsonforms-unselect.component.html’,  
styleUrls: [‘./jsonforms-unselect.component.scss’],  
})  
export class JsonformsUnselectComponent extends AutocompleteControlRenderer {}

I tried to add the empty option with null value, but got the error “must be equal to one of the allowed values”.

The part of the schema:  
“types”: {  
“title”: “types”,  
“$schema”: “[http://json-schema.org/draft-07/schema#](http://json-schema.org/draft-07/schema#)”,  
“type”: “object”,  
“description”: “Schema for selecting types.”,  
“oneOf”: [  
{  
“$schema”: “[http://json-schema.org/draft-07/schema#](http://json-schema.org/draft-07/schema#)”,  
“title”: “type1”,  
“type”: “object”,  
“properties”: {  
“type\_id”: {  
“title”: “ID”,  
“type”: “string”,  
“pattern”: “\[1\]{24}$”  
},  
“flow”: {  
“title”: “Flows”,  
“type”: “string”,  
“enum”: [  
“flow1”  
]  
}  
},  
“required”: ,  
“additionalProperties”: false  
},  
{  
“$schema”: “[http://json-schema.org/draft-07/schema#](http://json-schema.org/draft-07/schema#)”,  
“title”: “type2”,  
“type”: “object”,  
“properties”: {  
“type\_id”: {  
“title”: “ID”,  
“type”: “string”,  
“pattern”: “\[2\]{24}$”  
},  
“flow”: {  
“title”: “Flows”,  
“type”: “string”,  
“enum”: [  
“flow2”  
]  
}  
},  
“required”: ,  
“additionalProperties”: false  
}  
],  
“properties”: {  
“flow”: {  
“enum”: [  
“flow1”,  
“flow2”  
],  
“title”: “Flows”  
}  
},  
“required”:   
}

* * *

1. a-f\d 

2. a-f\d

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [September 16, 2024, 8:49pm UTC](https://jsonforms.discourse.group/t/unselect-dropdown/2340/2 "2024-09-16T20:49:33Z")

</div>

Hi @VladislavLinnik,

If you want to actually support `null` in the data, then the schema also needs to model this possibility, for example by adding `null` as one of the allowed enum values. As this is not the case in the given schema, you see validation errors.

In case you want to “delete” the value, then I would like to suggest to add an initial “empty” option. When the user selects it, you then call `handleChange` with the new value `undefined`. In that case the value will be deleted.

[This is what we do in the React Vanilla renderers](https://github.com/eclipsesource/jsonforms/blob/8c4b2f0fba3fda97c4194f841c57c54c7ae9203c/packages/vanilla-renderers/src/cells/EnumCell.tsx#L66-L71).