Styjun

Impedance ratio vs. SWR

Do simulator games use a realistic trajectory to get into orbit?

Is it a problem if <h4>, <h5> and <h6> are smaller than regular text?

What to do when surprise and a high initiative roll conflict with the narrative?

Why was the Sega Genesis marketed as a 16-bit console?

Would the US government be able to hold control if all electronics were disabled for an indefinite amount of time?

This riddle is not to see but to solve

Existence of a pointwise convergent subsequence

Does the spell Clone require any material components to cast on a Zealot barbarian?

Why VGA framebuffer was limited to 64kB window?

What is wrong with this proof that symmetric matrices commute?

What is the highest possible permanent AC at character creation?

How Often Do Health Insurance Providers Drop Coverage?

bash script: "*.jpg" expansion not working as expected inside $(...), for picking a random file

Is open-sourcing the code of a webapp not recommended?

How can this tool find out registered domains from an IP?

How to handle self harm scars on the arm in work environment?

How can electric fields be used to detect cracks in metals?

Pre-1972 sci-fi short story or novel: alien(?) tunnel where people try new moves and get destroyed if they're not the correct ones

Should an arbiter claim draw at a K+R vs K+R endgame?

Motivation - or how can I get myself to do the work I know I need to?

Is using haveibeenpwned to validate password strength rational?

Why is only the fundamental frequency component said to give useful power?

What is the highest possible temporary AC at level 1, without any help from others?

How to create fully controlled dropdown in semantic-ui-react

React/Redux - save select value onChangeAnimations of modal and dropdown in React Semantic UIHow to use onChange method in semantic react dropdownTrigger Re-Render of Child componentReact select filters on search but the search text is not visibleHow to manipulate selected values in semantic ui dropdownReact JS Select clearable value not fully clearing out the valuesReact Bootstrap - How to render components within FormControl attributes and option tags?React with Semantic TextArea not updating value when props updatedWhen selecting an option in a dropdown, how do I change the state with onChange but with a value other than the one inside the option tags

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I want to create a fully controlled dropdown in order to use react-window to show really long list of items in it.

I've checked docs, and there is no any example of controlled dropdown with Dropdown.Item specified.

This is how my component looks like:

<Dropdown
 placeholder="Filter Posts"
 clearable=true
 search=true
 onChange=this.handleChange
 text=tagOptions[1].value
 value=tagOptions[1].value
 onSearchChange=this.handleChange
>
 <Dropdown.Menu>
 tagOptions.map(option => (
 <Dropdown.Item key=option.value ...option onClick=this.handleItemClick />
 ))
 </Dropdown.Menu>
</Dropdown>;

I've encounter with 2 issues:

1. Initial value is not appears, I dig into the code, and saw that if i don't pass options property it won't find the given value, therefore, it will not be shown. I can use the text property, but it seems like a hack.


2. I need to implement handleItemClick by myself, and I see that there is logic in the original handleItemClick.

Any suggestions? did I missed something here?

reactjs semantic-ui-react

share|improve this question

asked Mar 24 at 16:58

felixmoshfelixmosh

4,7742822

add a comment | 

0

I want to create a fully controlled dropdown in order to use react-window to show really long list of items in it.

I've checked docs, and there is no any example of controlled dropdown with Dropdown.Item specified.

This is how my component looks like:

<Dropdown
 placeholder="Filter Posts"
 clearable=true
 search=true
 onChange=this.handleChange
 text=tagOptions[1].value
 value=tagOptions[1].value
 onSearchChange=this.handleChange
>
 <Dropdown.Menu>
 tagOptions.map(option => (
 <Dropdown.Item key=option.value ...option onClick=this.handleItemClick />
 ))
 </Dropdown.Menu>
</Dropdown>;

I've encounter with 2 issues:

1. Initial value is not appears, I dig into the code, and saw that if i don't pass options property it won't find the given value, therefore, it will not be shown. I can use the text property, but it seems like a hack.


2. I need to implement handleItemClick by myself, and I see that there is logic in the original handleItemClick.

Any suggestions? did I missed something here?

reactjs semantic-ui-react

share|improve this question

asked Mar 24 at 16:58

felixmoshfelixmosh

4,7742822

add a comment | 

I want to create a fully controlled dropdown in order to use react-window to show really long list of items in it.

I've checked docs, and there is no any example of controlled dropdown with Dropdown.Item specified.

This is how my component looks like:

<Dropdown
 placeholder="Filter Posts"
 clearable=true
 search=true
 onChange=this.handleChange
 text=tagOptions[1].value
 value=tagOptions[1].value
 onSearchChange=this.handleChange
>
 <Dropdown.Menu>
 tagOptions.map(option => (
 <Dropdown.Item key=option.value ...option onClick=this.handleItemClick />
 ))
 </Dropdown.Menu>
</Dropdown>;

I've encounter with 2 issues:

1. Initial value is not appears, I dig into the code, and saw that if i don't pass options property it won't find the given value, therefore, it will not be shown. I can use the text property, but it seems like a hack.


2. I need to implement handleItemClick by myself, and I see that there is logic in the original handleItemClick.

Any suggestions? did I missed something here?

reactjs semantic-ui-react

share|improve this question

asked Mar 24 at 16:58

felixmoshfelixmosh

4,7742822

<Dropdown
 placeholder="Filter Posts"
 clearable=true
 search=true
 onChange=this.handleChange
 text=tagOptions[1].value
 value=tagOptions[1].value
 onSearchChange=this.handleChange
>
 <Dropdown.Menu>
 tagOptions.map(option => (
 <Dropdown.Item key=option.value ...option onClick=this.handleItemClick />
 ))
 </Dropdown.Menu>
</Dropdown>;

share|improve this question

asked Mar 24 at 16:58

felixmoshfelixmosh

4,7742822

share|improve this question

asked Mar 24 at 16:58

felixmoshfelixmosh

4,7742822

asked Mar 24 at 16:58

felixmoshfelixmosh

4,7742822

asked Mar 24 at 16:58

felixmoshfelixmosh

4,7742822

2 Answers
2

active

oldest

votes

1

I've able to hack it around with using ref on the dropdown and passing the original handleItemClick method.

The only downside for now is that keyboard nav is not works :

Seem like it was not designed to be fully controlled.

https://codesandbox.io/s/ql3q086l5q

share|improve this answer

answered Mar 24 at 18:12

felixmoshfelixmosh

4,7742822

add a comment | 

0

1. To solve first problem remove clearable=true and text=tagOptions[1].value




2. What handleItemClick function should do?

share|improve this answer

answered Mar 24 at 17:37

Nikola TrajkovicNikola Trajkovic

648118

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Your first suggestion is not works.
  
  – felixmosh
  Mar 24 at 17:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Cansole log tagOptions[1]. to check did you get there any value. console.log('tagOptions[1].value', tagOptions[1].value)
  
  – Nikola Trajkovic
  Mar 24 at 18:06
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, You can play with this sandBox codesandbox.io/s/ql3q086l5q
  
  – felixmosh
  Mar 24 at 18:11
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55326242%2fhow-to-create-fully-controlled-dropdown-in-semantic-ui-react%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

I've able to hack it around with using ref on the dropdown and passing the original handleItemClick method.

The only downside for now is that keyboard nav is not works :

Seem like it was not designed to be fully controlled.

https://codesandbox.io/s/ql3q086l5q

share|improve this answer

answered Mar 24 at 18:12

felixmoshfelixmosh

4,7742822

add a comment | 

1

I've able to hack it around with using ref on the dropdown and passing the original handleItemClick method.

The only downside for now is that keyboard nav is not works :

Seem like it was not designed to be fully controlled.

https://codesandbox.io/s/ql3q086l5q

share|improve this answer

answered Mar 24 at 18:12

felixmoshfelixmosh

4,7742822

add a comment | 

I've able to hack it around with using ref on the dropdown and passing the original handleItemClick method.

The only downside for now is that keyboard nav is not works :

Seem like it was not designed to be fully controlled.

https://codesandbox.io/s/ql3q086l5q

share|improve this answer

answered Mar 24 at 18:12

felixmoshfelixmosh

4,7742822

share|improve this answer

answered Mar 24 at 18:12

felixmoshfelixmosh

4,7742822

answered Mar 24 at 18:12

felixmoshfelixmosh

4,7742822

answered Mar 24 at 18:12

felixmoshfelixmosh

4,7742822

0

1. To solve first problem remove clearable=true and text=tagOptions[1].value




2. What handleItemClick function should do?

share|improve this answer

answered Mar 24 at 17:37

Nikola TrajkovicNikola Trajkovic

648118

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Your first suggestion is not works.
  
  – felixmosh
  Mar 24 at 17:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Cansole log tagOptions[1]. to check did you get there any value. console.log('tagOptions[1].value', tagOptions[1].value)
  
  – Nikola Trajkovic
  Mar 24 at 18:06
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, You can play with this sandBox codesandbox.io/s/ql3q086l5q
  
  – felixmosh
  Mar 24 at 18:11
  

  
  
  
  

add a comment | 

0

1. To solve first problem remove clearable=true and text=tagOptions[1].value




2. What handleItemClick function should do?

share|improve this answer

answered Mar 24 at 17:37

Nikola TrajkovicNikola Trajkovic

648118

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Your first suggestion is not works.
  
  – felixmosh
  Mar 24 at 17:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Cansole log tagOptions[1]. to check did you get there any value. console.log('tagOptions[1].value', tagOptions[1].value)
  
  – Nikola Trajkovic
  Mar 24 at 18:06
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, You can play with this sandBox codesandbox.io/s/ql3q086l5q
  
  – felixmosh
  Mar 24 at 18:11
  

  
  
  
  

add a comment | 

1. To solve first problem remove clearable=true and text=tagOptions[1].value




2. What handleItemClick function should do?

share|improve this answer

answered Mar 24 at 17:37

Nikola TrajkovicNikola Trajkovic

648118

share|improve this answer

answered Mar 24 at 17:37

Nikola TrajkovicNikola Trajkovic

648118

answered Mar 24 at 17:37

Nikola TrajkovicNikola Trajkovic

648118

answered Mar 24 at 17:37

Nikola TrajkovicNikola Trajkovic

648118