0

I am creating a React component in SharePoint 2013 page, I an using content editor web part to render HTML and React component javascript.

I have used Textbox, Choice group control and they are working fine but Dropdown is not working as expected, it does not show items.

My React component render method.

render() {
        return (
            <div className="test">
                <div className="ms-TextField ms-TextField--underlined">
                    <Label required={true}>Project type</Label>
                    <ChoiceGroup name="projectType" defaultSelectedKey="project" className="defaultChoiceGroup" required={true} onChange={this.handleRadioChange}
                        options={[
                            {
                            key: 'project',
                            text: 'Project',
                            'data-automation-id': 'auto1'
                            },
                            {
                            key: 'bau',
                            text: 'BAU'
                            }
                        ]}
                    />
                </div>
                <div className="ms-TextField ms-TextField--underlined">
                    <label className="ms-Label is-required">Project name</label>
                    <TextField name="projectName" errorMessage={this.state.projectNameError} borderless value={this.state.projectName} onChange={this.handleChange} onBlur={this.ValidateTextBoxes} placeholder="Please enter project name."/>
                </div>
                <div className="ms-TextField ms-TextField--underlined">
                    <label className="ms-Label is-required">Project code</label>
                    <TextField name="projectCode" errorMessage={this.state.projectCodeError} borderless value={this.state.projectcode} onChange={this.handleChange} onBlur={this.ValidateTextBoxes} placeholder="Please enter project code."/>

                </div>
                <label className="ms-Label">Role type</label>
                    <Dropdown placeholder="Select options" multiSelect
          options={[
            { key: 'Header4', text: 'Colors', itemType: DropdownMenuItemType.Header },
            { key: 'red', text: 'Red' },
            { key: 'green', text: 'Green' },
            { key: 'blue', text: 'Blue' },
            { key: 'yellow', text: 'Yellow' },
            { key: 'divider_2', text: '-', itemType: DropdownMenuItemType.Divider },
            { key: 'Header5', text: 'Flower', itemType: DropdownMenuItemType.Header },
            { key: 'rose', text: 'Rose' },
            { key: 'lily', text: 'Lily' },
            { key: 'sunflower', text: 'Sunflower' }
          ]}
        />

            </div>
        )
    }

this is how it being rendered.

enter image description here

when click on dropdown arrow it just shows the darkline under the control. There is no javascript console error.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.